CSS Animations

1， 介绍

    CSS Transitions提供一种在属性改变时改变css属性的方法。这提供了一种实现简单动画的简单方法，但是动画的开始和结束状态是通过现在的属性指定的，对动画的中间进程所提供的控制方式也很少。

    本草案主要介绍声明animations，开发者可以通过一系列的keyframes声明属性变化。Animations与transitions在css属性变化时很相似。主要不同点是：在属性变化时，transitions 是隐示触发的而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-nameValue:[ none | IDENT ] [, [ none | IDENT ] ]*Initial:noneApplies to:all elements, :before and :after pseudo elementsInherited:noPercentages:N/AMedia:visualComputed value:Same as specified value.3.3 animation-duration属性

Name:animation-durationValue:<time> [, <time>]*Initial:0sApplies to:all elements, :before and :after pseudo elementsInherited:noPercentages:N/AMedia:visualComputed value:Same as specified value.

3.4 animation-timing-function

Name:animation-timing-functionValue:[ 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:easeApplies to:all elements, :before and :after pseudo elementsInherited:noPercentages:N/AMedia:visualComputed value:Same as specified value.3.5 animation-iteration-count属性

 Name:animation-iteration-countValue:[ infinite | <number> ] [, [ infinite | <number> ] ]*Initial:1Applies to:all elements, :before and :after pseudo elementsInherited:noPercentages:N/AMedia:visualComputed value:Same as specified value.

3.6 animation-direction属性

Name:animation-directionValue:[ normal | reverse | alternate | alternate-reverse ] [, [ normal | reverse | alternate | alternate-reverse ] ]*Initial:normalApplies to:all elements, :before and :after pseudo elementsInherited:noPercentages:N/AMedia:visualComputed value:Same as specified value.3.7 animation-play-state属性

Name:animation-play-stateValue:[ running | paused ] [, [ running | paused ] ]*Initial:runningApplies to:all elements, :before and :after pseudo elementsInherited:noPercentages:N/AMedia:visualComputed value:Same as specified value.3.8 animation-delay属性

Name:animation-delayValue:<time> [, <time>]*Initial:0sApplies to:all elements, :before and :after pseudo elementsInherited:noPercentages:N/AMedia:visualComputed value:Same as specified value.3.9 animation-fill-mode属性

Name:animation-fill-modeValue:[ none | forwards | backwards | both ] [, [ none | forwards | backwards | both ] ]*Initial:noneApplies to:all elements, :before and :after pseudo elementsInherited:noPercentages:N/AMedia:visualComputed value:Same as specified value.3.10 animation快捷键属性

Name:animationValue:[<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 propertiesApplies to:all elements, :before and :after pseudo elementsInherited:noPercentages:N/AMedia:visualComputed 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-delay then 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 which animation-iteration-count is greater than one. This event does not occur for animations with an iteration count of one.

• Bubbles: Yes
• Cancelable: No
• Context Info: animationName, elapsedTime