css-动画

浏览器最低版本支持： Chrome（43.0）、Firefox（16.0）、Opera（30.0）、Internet（10.0）

基础概念

animation属性系列

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

• animation-name：
  描述：规定 @keyframes 动画的名称
  语法：animation-name: keyframename|none;
  属性：

  值	描述
  keyframename	规定需要绑定到选择器的 keyframe 的名称。
  none	规定无动画效果（可用于覆盖来自级联的动画）。

• animation-duration：
  描述：规定完成动画所花费的时间，以秒或毫秒计。
  语法：animation-duration: time;
  属性：

  值	描述
  time	规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。

• animation-timing-function：
  描述：规定动画的速度曲线。
  语法：animation-timing-function: value;
  属性：

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

• animation-delay：
  描述：规定在动画开始之前的延迟。
  语法：animation-delay: time;
  属性：

  值	描述
  time	可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。

• animation-iteration-count：
  描述：规定动画应该播放的次数。
  语法：animation-iteration-count: n|infinite;
  属性：

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

• animation-direction：
  描述：规定是否应该轮流反向播放动画。
  语法：animation-direction: normal|alternate;
  属性：

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

• animation-fill-mode：
  描述：规定动画在执行时间之外应用的值。
  语法：animation-fill-mode : none | forwards | backwards | both;
  属性：

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

• animation-play-state：
  描述：规定动画是正在运行还是暂停。
  语法：animation-play-state: paused|running;
  属性：

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

@keyframes属性

• 描述：规定动画模式。

• 语法：@keyframes animationname {keyframes-selector {css-styles;}}

• 属性：

  值	描述
  animationname	必需。定义动画的名称。
  keyframes-selector	必需。动画时长的百分比。 合法的值： 0-100% 、 from（与 0% 相同）、 to（与 100% 相同）
  css-styles	必需。一个或多个合法的 CSS 样式属性。

应用范围分析

• 基础使用：

  div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
  }
  
  @keyframes example {
    0% {
      background-color: red;
    }
    25% {
      background-color: yellow;
    }
    50% {
      background-color: blue;
    }
    100% {
      background-color: green;
    }
  }