# # css动画

## # animation

CSS animation属性是如下属性的一个简写属性形式:
animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction 和 animation-fill-mode.

    /* @keyframes duration | timing-function | delay |
       iteration-count | direction | fill-mode | play-state | name */
      animation: 3s ease-in 1s 2 reverse both paused slidein;

    /* @keyframes duration | timing-function | delay | name */
      animation: 3s linear 1s slidein;

    /* @keyframes duration | name */
      animation: 3s slidein;

1
2
3
4
5
6
7
8
9

## # animation-delay

定义:

    CSS属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。

1

语法:

    animation-delay: 3s;
    animation-delay: 2s, 4ms;

1
2

## # animation-direction

定义:

    CSS 属性指示动画是否反向播放，它通常在简写属性animation中设定

1

语法:

    animation-direction: normal
    animation-direction: reverse
    animation-direction: alternate
    animation-direction: alternate-reverse
    animation-direction: normal, reverse
    animation-direction: alternate, reverse, normal

1
2
3
4
5
6

属性 | 作用
--- | ---
normal | 每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
alternate | 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
reverse | 反向运行动画，每周期结束动画由尾到头运行。
alternate-reverse | 反向交替， 反向开始交替;动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。

## # animation-duration

定义:

    属性指定一个动画周期的时长。

1

语法:

    animation-duration: 6s
    animation-duration: 120ms
    animation-duration: 1s, 15s
    animation-duration: 10s, 30s, 230ms

1
2
3
4

属性 | 作用
--- | ---
time | 一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。

## # animation-fill-mode

定义:

    这个 CSS 属性用来指定在动画执行之前和之后如何给动画的目标应用样式。

1

语法

    /* <single-animation-fill-mode> = none | forwards | backwards | both */
    animation-fill-mode: none
    animation-fill-mode: forwards
    animation-fill-mode: backwards
    animation-fill-mode: both
    /* 可以应用多个参数，这个时候使用逗号隔开  */
    /* 各个参数应用于与次序相对应的动画名 */
    animation-fill-mode: none, backwards
    animation-fill-mode: both, forwards, none

1
2
3
4
5
6
7
8
9

> none
> 动画执行前后不改变任何样式 forwards
> 目标保持动画最后一帧的样式，最后一帧是哪个取决于animation-direction和 animation-iteration-count:

animation-direction | animation-iteration-count | last keyframe encountered
--- | --- | ---
normal | even or odd | 100% or to
reverse | even or odd | 0% or from
alternate | even | 0% or from
alternate | odd | 100% or to
alternate-reverse | even | 100% or to
alternate-reverse | odd | 0% or from

> backwards
> 动画采用相应第一帧的样式，保持 animation-delay，第一帧取法如下：

animation-direction | first relevant keyframe
--- | ---
normal or alternate | 0% or from
reverse or alternate-reverse | 100% or to

> both
> 动画将会执行 forwards 和 backwards 执行的动作。

animation-iteration-count 定义:

    CSS 属性   定义动画在结束前运行的次数 可以是1次 无限循环.
    默认属性 animation 默认播放动画循环一次.

1
2

语法:

    /* 使用规范 <single-animation-iteration-count> = infinite | <number> */
    animation-iteration-count: infinite;
    animation-iteration-count: 3;
    animation-iteration-count: 2.3;
    animation-iteration-count: 2, 0, infinite;

1
2
3
4
5

## # animation-name

定义

    属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。

1

    /* Single animation */
    animation-name: none;
    animation-name: test_05;
    animation-name: -specific;
    animation-name: sliding-vertically;

    /* Multiple animations */
    animation-name: test1, animation4;
    animation-name: none, -moz-specific, sliding;

    /* Global values */
    animation-name: initial
    animation-name: inherit
    animation-name: unset

1
2
3
4
5
6
7
8
9
10
11
12
13
14

## # animation-play-state

定义:

    CSS 属性定义一个动画是否运行或者暂停。
    可以通过查询它来确定动画是否正在运行。
    另外，它的值可以被设置为暂停和恢复的动画的重放。
    恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。

1
2
3
4

语法

    /* 正式语法 => <single-animation-play-state> = running | paused */
    /* Single animation=>单一动画 */
    animation-play-state: running;
    animation-play-state: paused;

    /* Multiple animations=>多个动画 */
    animation-play-state: paused, running, running;

    /* Global values=>全球价值 */
    animation-play-state: inherited;
    animation-play-state: initial;
    animation-play-state: unset;

1
2
3
4
5
6
7
8
9
10
11
12

属性 | 注释
--- | ---
running | 当前动画正在运行。
paused | 当前动画以被停止。

## # animation-timing-function

属性

    定义CSS动画在每一动画周期中执行的节奏。
    可能值为一或多个 <timing-function>。

    对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，
    即从关键帧开始开始，到关键帧结束结束。

    定义于一个关键帧区块的缓动函数(animation timing function)应用到改关键帧；
    另外，若该关键帧没有定义缓动函数，则使用定义于整个动画的缓动函数。

1
2
3
4
5
6
7
8

示例

    /* Keyword values */
    animation-timing-function: ease;
    animation-timing-function: ease-in;
    animation-timing-function: ease-out;
    animation-timing-function: ease-in-out;
    animation-timing-function: linear;
    animation-timing-function: step-start;
    animation-timing-function: step-end;

    /* Function values */
    animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
    animation-timing-function: steps(4, end);
    animation-timing-function: frames(10);

    /* Multiple animations */
    animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

    /* Global values */
    animation-timing-function: inherit;
    animation-timing-function: initial;
    animation-timing-function: unset;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

## # FAQ

贝塞尔曲线(cubic-bezier)
疑惑点:

    animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

1

CSS3 timing-function: steps() 详解

    animation-timing-function: steps(4, end);

1

## # Cylon 眼睛

考虑到所有浏览器特定的前缀，这里是一个Cylon 眼睛动画合并线性渐变和动画，适用于所有主要的浏览器：

    <div class="view_port">
      <div class="polling_message">
        Listening for dispatches
      </div>
      <div class="cylon_eye"></div>
    </div>

1
2
3
4
5
6

    .polling_message {
      color:white;
      float:left;
      margin-right:2%;
    }

    .view_port {
      background-color:black;
      height:25px;
      width:100%;
      overflow: hidden;
    }

    .cylon_eye {
      color:white;
      height: 100%;
      width: 20%;

      background-color: red;
      background-image: -webkit-linear-gradient(left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
      background-image:    -moz-linear-gradient(left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
      background-image:     -ms-linear-gradient(left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
      background-image:      -o-linear-gradient(left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
      background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);

      -webkit-animation: move_eye 4s linear 0s infinite alternate;
         -moz-animation: move_eye 4s linear 0s infinite alternate;
           -o-animation: move_eye 4s linear 0s infinite alternate;
              animation: move_eye 4s linear 0s infinite alternate;
    }

    @-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
       @-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
         @-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
            @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35