CSS 3 动画2D

动画分为两种,1,逐帧动画  组成动画的每一个画面就是一帧 2,关键帧动画,确定关键帧电脑会自动过度

动画中如果遇到不兼容的问题也是要加前缀

@-webkit-keyframes规则   @-webkit-animation属性

关键帧动画: @keyframes + 动画名称

第一帧最后一帧

from:第一帧动画
to:最后一帧动画

@keyframes donghua{

 from {
width: 100px;height: 100px;
}
to {
width: 20px;height: 200px
}

关键帧动画: @keyframes + 动画名称

进度的形式设置关键帧
 @keyframes myAnimation{
　　　　0%{width: 50px; height: 100px}
　　　　50%{width: 100px;height:100px}
　　　　100%{width: 100px;height:200px}
}

调用动画

调用动画的可选属性

(3)设置动画的延迟时间
animation-delay: 1s;

(4)设置动画的方向 direction
normal: 默认值 正常方向
reverse: 反转
alternate: 逐次取反

animation-direction: alternate;

(5)设置动画执行的次数 iteration
触发动画执行条件 并且保持该条件
infinite:无限次  或数字

animation-iteration-count: 1 ;

(6) 设置元素播放前后的填充状态
none:默认值;
backwards:设置元素动画之前的状态和第一帧相同
forwards:设置元素动画完成之后的状态和最后一帧相同
both:backwards+forwards

animation-fill-mode: both;

(7)控制元素动画播放的状态
running: 执行;
paused: 暂停

animation-play-state: paused;

(8)控制动画播放运动形式
animation-timing-function: ease-in;

linear  匀速

ease   缓冲

ease-in由慢到快

ease-out由快到慢

ease-in-out由慢到快再慢