keyframes动画 ios兼容处理 keyframes transform

CSS动画与变形（三）

                                                         ———动画

一、Keyframes介绍

Keyframes（关键帧）:计算机动画术语，帧——就是动画中最小单位的单幅影像画面，相当于电影胶片上的毎一格镜头。在动画软件的时间轴上帧表现为一格或一格标记。

关键帧—相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。关键帧与关键帧之间的动画可以由软件来创建，叫做过渡帧或者中间帧。

keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyfeames”开头，后面紧跟着是动画名称加上一对花括号“{........}”，括号中就是一些不同时间段样式规则。

在一个“@keyframes”中的样式规则可以由多个百分比构成的，

如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。

用百分比来规定变化的时间，或用关键字form和to等同于0%和100%，0%是动画的开始，100%是动画的结束。

二、浏览器支持

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属

性。

三、animation属性

animation属性是一个简写属性，用于设置六个属性:

-animation-name

-animation-duration

-animation-timing-function

-animation-delay

-animation-iteration-count

-animation-direction

语法：

animation:name during timging-funciton delay iteration-count direction;

 

四、animation-name调用动画

Animation-name属性为 @keyframes 动画规定名称。

需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），

如果不一致将不具有任何动画效果。

属性值：

none:默认值。当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。

“@keyframes”定义的动画名称。

 

五、animation-duration播放时间

animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。

使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成一次动画所需要的时间，单位：S 注意不是毫秒

 

六、animation-timing-function播放方式

Animation-timing-function属性主要用来设置动画的播放方式。

主要让元素根据时间的推移来改变属性值的变换速率。

预定义的值有：（同上一篇的transition过渡里的transition-timing-function类似）

1. ease默认值：动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度。

 

慢==>快==>慢

1. linear线性速度：动画开始时的速度和结束时的速度一样（匀速）。

 

 

1. ease-in：动画开始的速度比较慢，然后速度加快。

慢==>快

 

1. ease-out：动画开始的速度很快，然后速度减慢。

快==>慢

 

1. Ease-in-out：动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度。

慢==>快==>慢

七、animation-iteration-count播放次数

Animation-iteration-count属性主要用来定义动画的播放次数。

值通常为整数，也可使用带有小数的数字，默认值为1，

表示动画只播放一次。

Infinite,表示动画会无限次播放（循环播放）

八、animation-direction播放的方向

Animation-direction属性主要用来设置动画播放方向。（是否应该轮流反向播放动画）

如果animation-direction值是“altertmate”，则动画会在奇数次数（1、3、5等）正常播放，而在偶数次数（2、4、6等）向后播放。

 

九、animation-play-state播放状态

1. Animation-play-state主要用来控制元素动画的播放状态（运行或暂停）。

参数：

其主要有两个值：running和paused。

其中running是其默认值，主要作用就是类似于音乐播放器一样，

可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。

十、animation-fill-mode动画时间外

Animation-fill-mode属性定义在动画时间开始之前和结束之后发生的操作。主要有四个属性值：none、 forwards、 backwords 和both。

1. none默认值：表示动画将预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
2. Forwards:表示动画在结束后继续应用最后的关键帧的位置
3. Backwards:会在向元素应用动画样式是迅速应用动画的初始帧
4. Both：元素动画同时具有forwards和backwards效果，在默认情况下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧是上。或者同时具有这两个效果。

实例：