css3属性中关于制作动画的三个属性:Transform,Transition,Animation。
1、transform:描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
div{ transform:scale(2); }
transition和animation两者都能实现动画效果
transform常常配合transition和animation使用
2、transition样式过渡,从一种效果逐渐改变为另一种效果
transition是一个合写属性
transition:transition-property transition-duration transition-timing-function transition-delay
从左到右分别是:css属性、过渡效果花费时间、速度曲线、过渡开始的延迟时间
div{ width:100px; height:100px; transition:transform 2s; } div:hover{ transform:rotate(180deg); }
transition通常和hover等事件配合使用,需要由事件来触发过渡
3、animation动画 由@keyframes来描述每一帧的样式
div{ animation:myAnimation 5s infinite } @keyframes myAnimation { 0%{left:0;transform:rotate(0);} 100%{left:200px;transform:rotate(180deg);} }
资源网站大全 https://55wd.com 我的007办公资源网站 https://www.wode007.com
区别:
(1)transform仅描述元素的静态样式,常常配合transition和animation使用
(2)transition通常和hover等事件配合使用,animation是自发的,立即播放
(3)animation可设置循环次数
(4)animation可设置每一帧的样式和时间,transition只能设置头尾
(5)transition可与js配合使用,js设定要变化的样式,transition负责动画效果,如:
/*css:*/ div{ width:100px; height:100px; transition:all 1s; } //js divEle.onclick = function(){ divEle.style.width = "200px"; divEle.style.height = "200px"; }