CSS Animations
1， 介绍
CSS Transitions提供一种在属性改变时改变css属性的方法。这提供了一种实现简单动画的简单方法，但是动画的开始和结束状态是通过现在的属性指定的，对动画的中间进程所提供的控制方式也很少。
本草案主要介绍声明animations，开发者可以通过一系列的keyframes声明属性变化。Animations与transitions在css属性变化时很相似。主要不同点是：在属性变化时，transitions
是隐示触发的而animations 是显示触发的。因此在实现属性动画时animations需要明确的属性值，这些值通过animation
keyframes指定。
是隐示触发的而animations 是显示触发的。因此在实现属性动画时animations需要明确的属性值，这些值通过animation
keyframes指定。
animation 的许多方面都是可以控制的，包括：动画迭代次数、开始和结束值是否交替、或动画是否可以开始和暂停，动画也可以延迟开始时间点。
2，Animations
css Animations 影响计算属性值，在animation执行过程中，属性的计算值被animation控制，它将覆盖原来定义的值。
如果对同一属性指定多个animation，最后定义的animation将覆盖前面的animation值。
在这些时候animation将不会影响属性计算值：在应用animation前、animation延时过期、animation结束。
上图显示了属性值是如何被计算的。最上面显示了本来的样式，在animation开始前及延时过程中，计算样式和原来样式一致，在animation过程中，计算样式值来自于animation.
animation将在在两种状态后开始：指定animaion被解析或document load事件触发时，因此样子声明的animation 会在document加载前执行。在文档加载后，通过修改元素样式指定的animation将在样式被解析时执行。在hover这样的伪类定义时是立即执行的。或脚本引擎将控制权交给浏览器时执行。
animation通过animation-name样式来指定，并且animation-name引用一个可用的keyframes规则。一旦animation开始它将持续到结束或者animation-name被移除。keyframes和animation属性指定的值只是在动画开始瞬间的快照。在动画执行过程中改变它们是没有效果的。还要注意的是，改变animation-name的值不会重新启动animtion(例如，已经运行的一系列animations，如果其中一个被删除，只有这个一animation停止，别的会继续执行)。要想重新启动一个animaion,应改先移除此animation然后重新应用此animation.
最后animation通过
'animation-duration', 'animation-iteration-count' 和'animation-fill-mode'属性来声明。例一：
div {
animation-name: diagonal-slide;
animation-duration: 5s;
animation-iteration-count: 10;
}
@keyframes diagonal-slide {
from {
left: 0;
top: 0;
}
to {
left: 100px;
top: 100px;
}
}
这将会将一个元素在5秒内从(0, 0) 移到(100px, 100px)，并重复执行9次（总共10次）。
3，keyframes
keyframes用来声明animation执行过程中的各种属性值。keyframes用来声明动画执行的一个周期，animation将迭代一次或多次。
keyframes用css的@规则声明。一个@keyframes规则结构：以关键字@keyframes开始，接着是animation名字标识，接着是一系列样式规则。
keyframe样式规则选择器由一系列逗号分隔的%或from to组成的列表。此选择器用来指定animation的进度，它本身用一个属性块声明。from和0%等价，to和100%等价。注意百分比单位只能用百分比值，因此0是错误的选择器。
如果0%或 from未指定，浏览器将会通过元素的计算值创建，如果to或end未指定，浏览器会通过动画元素计算值创建一个
由keyframe规则指定的属性和值，不支持animation属性将被忽略，将产生
'animation-timing-function'异常，keyframes中声明的规则将由时间递增排序，如果有重复，最后一个有次。
如果keyframe中声明了一个不可用的属性或未声明属性，此属性的animation将不在在，一般来讲如果每个属性都出现在keyframe中时，animation将在每个属性中独立运行。
例二：
@keyframes wobble {
0% {
left: 100px;
}
40% {
left: 150px;
}
60% {
left: 75px;
}
100% {
left: 100px;
}
}
动画wobble声明了四个keyframe,在第一帧中声明了开始状态，left设置为100px，在动画执行40%时left变为150px,60%时为75px,最后变为100px,下图给出了执行10s 动画时的状态：
keyframe语法规则如下：
keyframes_rule: KEYFRAMES_SYM S+ IDENT S* '{' S* keyframes_blocks '}' S*;
keyframes_blocks: [ keyframe_selector '{' S* declaration? [ ';' S* declaration? ]* '}' S* ]* ;
keyframe_selector: [ FROM_SYM | TO_SYM | PERCENTAGE ] S* [ ',' S* [ FROM_SYM | TO_SYM | PERCENTAGE ] S* ]*;
@{K}{E}{Y}{F}{R}{A}{M}{E}{S} {return KEYFRAMES_SYM;}
{F}{R}{O}{M} {return FROM_SYM;}
{T}{O} {return TO_SYM;}
3.1 keyframes时序函数
keyframes也可以声明一个函数用来在执行下一帧前执行。
例三：
@keyframes bounce {
from {
top: 100px;
animation-timing-function: ease-out;
}
25% {
top: 50px;
animation-timing-function: ease-in;
}
50% {
top: 100px;
animation-timing-function: ease-out;
}
75% {
top: 75px;
animation-timing-function: ease-in;
}
to {
top: 100px;
}
}
3.2 animation-name属性
animation-name声明一系列animations,每一个名字由@keyframe声明，如果没有@keyframe在在，动画将不会执行。此外将naimation name设为none将也不会出现动画，这种方法用一覆盖级连动画。如果动画企图修改属性值，它将修改列表最后的值。
| Name: | animation-name |
| Value: | [ none | IDENT ] [, [ none | IDENT ] ]* |
| Initial: | none |
| Applies to: | all elements, :before and :after pseudo elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | Same as specified value. |
3.3 animation-duration属性
| Name: | animation-duration |
| Value: | <time> [, <time>]* |
| Initial: | 0s |
| Applies to: | all elements, :before and :after pseudo elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | Same as specified value.
|
3.4 animation-timing-function
| Name: | animation-timing-function |
| Value: |
[ ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<number>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) ] [, [ ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<number>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)] ]* |
| Initial: | ease |
| Applies to: | all elements, :before and :after pseudo elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | Same as specified value. |
3.5 animation-iteration-count属性
| Name: | animation-iteration-count |
| Value: | [ infinite | <number> ] [, [ infinite | <number> ] ]* |
| Initial: | 1 |
| Applies to: | all elements, :before and :after pseudo elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | Same as specified value. |
3.6 animation-direction属性
| Name: | animation-direction |
| Value: | [ normal | reverse | alternate | alternate-reverse ] [, [ normal | reverse | alternate | alternate-reverse ] ]* |
| Initial: | normal |
| Applies to: | all elements, :before and :after pseudo elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | Same as specified value. |
3.7 animation-play-state属性
| Name: | animation-play-state |
| Value: | [ running | paused ] [, [ running | paused ] ]* |
| Initial: | running |
| Applies to: | all elements, :before and :after pseudo elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | Same as specified value. |
3.8 animation-delay属性
| Name: | animation-delay |
| Value: | <time> [, <time>]* |
| Initial: | 0s |
| Applies to: | all elements, :before and :after pseudo elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | Same as specified value. |
3.9 animation-fill-mode属性
| Name: | animation-fill-mode |
| Value: | [ none | forwards | backwards | both ] [, [ none | forwards | backwards | both ] ]* |
| Initial: | none |
| Applies to: | all elements, :before and :after pseudo elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | Same as specified value. |
3.10 animation快捷键属性
| Name: | animation |
| Value: |
[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode>] ]* |
| Initial: | see individual properties |
| Applies to: | all elements, :before and :after pseudo elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | Same as specified value. |
The different types of Animation events that can occur are:
- animationstart
- The ’animationstart' event occurs at the start of the animation. If there is an
animation-delaythen
this event will fire once the delay period has expired. A negative delay will cause the event to fire with an elapsedTime equal to the absolute value of the delay.- Bubbles: Yes
- Cancelable: No
- Context Info: animationName
- animationend
- The ‘
animationend’ event occurs when the animation finishes.- Bubbles: Yes
- Cancelable: No
- Context Info: animationName, elapsedTime
- animationiteration
- The ‘
animationiteration’ event occurs at the end of each iteration of an animation for whichanimation-iteration-countis
greater than one. This event does not occur for animations with an iteration count of one.- Bubbles: Yes
- Cancelable: No
- Context Info: animationName, elapsedTime