keyframes&animation

1. keyframes(关键帧)

关键帧——相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作 所处的那一帧。关键帧与关键帧之间的动画可以由软件来创建，叫做过渡帧或者 中间帧。其类似于 Flash 中的关键帧。在 CSS3 中其主要以“@keyframes” 开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时 间段样式规则。通常以百分比来规定改变发生的时间，或者通过关键词”from”和”to”,等价于0%和100%。0%是动画的开始时间,100%动画的结束时间。

关键帧的创建：

//0%和100%之间可以创建多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式；

//0%和100%可以使用关键词from和to来表示。

1. animation(动画)

animation为复合样式，包含以下属性：

//animation:animation-name;(调用动画)

——规定需要绑定到选择器的keyframe名称。

//animation-duration (动画播放时间)

——规定动画所花费的时间，以秒或毫秒计。

// animation-timing-function (动画播放方式)，同 tranition 动画过渡；

——规定动画的速度曲线。

// animation-delay (动画开始播放时间)

——规定动画开始之前的延迟。

//animation-iteration-count （动画播放次数）

——规定动画应该播放的次数。

//animation-direction (动画播放方向)

——规定是否应该轮流反向播放动画。

注释：请始终规定animation-direction属性，否则时长为0，就不会播放动画了。