CSS动画animation

基本用法

首先，CSS Animation需要指定动画一个周期持续的时间，以及动画效果的名称。

div:hover {
  animation: 1s rainbow;
}

上面代码表示，当鼠标悬停在div元素上时，会产生名为rainbow的动画效果，持续时间为1秒。为此，我们还需要用keyframes关键字，定义rainbow效果。

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

上面代码表示，rainbow效果一共有三个状态，分别为起始（0%）、中点（50%）和结束（100%）。如果有需要，完全可以插入更多状态。

默认情况下，动画只播放一次。加入infinite关键字，可以让动画无限次播放。

div:hover {
  animation: 1s rainbow infinite;
}

也可以指定动画具体播放的次数，比如3次。

div:hover {
  animation: 1s rainbow 3;
}

关键帧(@keyframes)

keyframes关键字用来定义动画的各个状态，它的写法相当自由。

@keyframes rainbow {
  0% { background: #c00 }
  50% { background: orange }
  100% { background: yellowgreen }
}

• 如果0%或100%不指定关键帧，将使用该元素默认的属性值

• 如果存在负百分数或高于100%的百分数，则该关键帧将被忽略

• 若存在多个@keyframes，浏览器只识别最后一个@keyframes里面的值

• 空的keyframes规则是有效的，它们会覆盖前面有效的关键帧规则

动画属性

animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

animation-name 动画名称

自定义动画名称(keyframes关键字后的 name)

animation-name: none | <single-animation-name> [, <single-animation-name> ]*

如果多个动画试图修改相同的属性，那么动画列表的后面覆盖前面

animation-duration 持续时间

animation-duration: <time>[,<time>]*

0s意味着动画没有时间，持续时间不能为负值

animation-timing-function 时间函数

animation-timing-function: <single-timing-function> [, <single-timing-function>]*

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-delay 延迟时间

animation-delay: time;

负值，请注意动画跳过 2 秒进入动画周期

animation-iteration-count

animation-iteration-count: n|infinite;

值	描述
n	定义动画播放次数的数值。
infinite	规定动画应该无限次播放。

animation-direction 动画方向

animation-direction: normal|alternate;

值	描述
normal	默认值。动画应该正常播放。
alternate	动画应该轮流反向播放。

animation-play-state 动画状态

animation-play-state: paused|running;

值	描述
paused	规定动画已暂停。
running	规定动画正在播放。

animation-fill-mode 填充模式

animation-fill-mode : none | forwards | backwards | both;

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

API

animation涉及到的事件有animationstart、animationend、animationiteration三个。这三个事件的bubbles都是yes，cancelable都是no

[注意]对于safari浏览器，animation的事件为webkitAnimationStart、webkitAnimationEnd、webkitAnimationIteration

[注意]动画事件只支持DOM2级事件处理程序的写法

   oSb.addEventListener('animationstart',function(){
        this.innerHTML = '动画开始';
        this.style.background = 'lightgreen';
    },false);