keyframes & animation

1、keyframes（关键帧） 

（1）计算机动画术语， 帧--就是动画中最小单位的单幅影像画面，相当于电影 胶片

上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标记。

 

（2）关键帧——相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作

所处的那一帧。关键帧与关键帧之间的动画可以由软件来创建，叫做过渡帧或者

中间帧。其类似于 Flash 中的关键帧。在 CSS3 中其主要以 “@keyframes” 开

头，后面紧跟着是动画名称加上一对花括号“{…}”， 括号中就是一些不同时

间段样式规则。

2、关键帧的创建 

（1）0%和 100%之间可以创建多个百分比，分别给每个百分比中给需要有动画效

果的元素加上不同的样式；

 

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

3、animation 动画

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

1）animation:animation-name;(调用动画） 

2）animation-duration (动画播放时间) l

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

4）animation-delay (动画开始播放时

5）animation-iteration-count（动画播放次数） 两个值： infinite(无限)；n(具体次数

6）animation-direction (动画播放方向） 两个值： normal 每次循环都是向前播放； alternate 奇数次向前播放，偶数次反方向播放；

7）animation-play-state （动画播放状态） 两个值：running & paused running 类似于音乐播放器，paused 是将播放的动画停下来； running 将暂停的动画重新播放，是从暂停位置开始播放，另外如果暂 停了动画 的播放，元素的样式将回到最原始设置的状态。

8）animation-fill-mode （动画时间外属性）

四个值： none：默认，动画按预期进行，在动画完成最后一帧时，会反转到初帧；

forwards：动画结束后应用最后的关键帧；

backwards：元素应用动画样式是迅速应用动画的初始帧，主要体现在动 画开始之前；

both：同时具有 forwards 和 backwards 的效果，即开始前会应用初始 帧，结束后会继续应用最后的关键帧；