CSS3动画相关的几个属性是:transition, transform, animation;我分别理解为过渡,变换,动画。
transition
1)transition-property 指定过渡的属性值
2)transition-duration 指定这个过渡的持续时间
3)transition-delay 延迟过渡时间
4)transition-timing-function 指定过渡动画缓动类型,linear线性过度,ease-in由慢到快,ease-out由快到慢,ease-in-out由慢到快在到慢
trsndform:指拉伸,压缩,旋转,偏移。
如:.trans_skew { transform: skew(35deg); }
.trans_scale { transform:scale(1, 0.5); }
.trans_rotate { transform:rotate(45deg); }
.trans_translate { transform:translate(10px, 20px); }
transform属性要是加上transition的过渡特性会是什么效果呢??? 如下:
.waves-ripple.z-active {
opacity: 0;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out;
}
表示这个标签的opacity属性从1-0的显示状态经过1.2s,同时放大过程经历0.6s,要保证放大过程的效果,opaccity经历的时间要大于方法经历的时间。
animation
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。默认0
animation-timing-function 规定动画的速度曲线。默认ease
animation-delay 规定在动画开始之前的延迟。默认0
animation-iteration-count 规定动画应该播放的次数。默认1
animation-direction 规定是否应该轮流反向播放动画。默认normal
div {
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{}
@-o-keyframes myfirst /* Opera */
{}
// 2
// @keyframes myfirst
// {
// 0% {background: red;}
// 25% {background: yellow;}
// 50% {background: blue;}
// 100% {background: green;}
// }
网友评论