参考

animation相关属性是CSS3提供的帧动画功能，IE9及以下版本不支持这些属性。

animation与transition的用法非常相似。 只是transition需要事件触发，而animation不需要。

keyframes是用来定义关键帧的。帧动画就是用这些关键帧连成的。如果你做过视频编辑的话， 应该对这个很熟悉，视频就是由非常多的图像连成的，只是每张图像之间的切换速度非常快，如果每秒钟至少有60帧能连续显示的话， 人眼就看不出不连贯，也就是看不出卡顿，人眼看到的就是平滑的。

每秒钟显示多少帧，有个术语叫FPS(Frames Per Seconds)。提升流畅度，就是要提升这个值，最起码要达到60FPS。

keyframes的使用格式：

@keyframes animation-name {keyframes-selector { css-properties; }}

keyframes-selector是一些百分数，比如0%、20%、100%之类的， 数字是随意的，只要在0-100之间都可以。0%可以使用关键词from来代替，100%可以使用关键词to来代替。

keyframes-selector通常是多个，每一个就是一帧，显然，只有有多个帧才能动起来嘛。

示例：

@keyframes 'wobble' {
    0% {
        margin-left: 100px;
        background: green;
    }
    40% {
        margin-left: 150px;
        background: orange;
    }
    60% {
        margin-left: 75px;
        background: blue;
    }
    100% {
        margin-left: 100px;
        background: red;
    }
}

wobble就是动画名称，名字任意取。定义一个名字，是为了方便其他属性使用。

0%、40%、60%、100%等都是关键帧。

每个帧里面的是切换到对应帧时候的CSS属性。

animation-name属性用来指定要使用哪个动画。

animation-name的使用格式：

animation-name : none | name1 [, name2]

none为默认值，当值为none时，将没有任何动画效果。

name1就是用keyframes定义的动画名称。可以一次性指定多个动画。

animation-duration设置这个过度过程要持续多久。单位是s，而且必须带上s，即使是0也要带上。

animation-duration的使用格式：

animation-duration : value [, value]

可以设置多个值。并且必须带上单位s。

animation-delay设置这个过度要从多久之后开始。单位是s，而且必须带上s，即使是0也要带上。

animation-delay的使用格式：

animation-delay : value [, value]

可以设置多个值。并且必须带上单位s。

animation-timing-function设置这个过度过程中的变化节奏函数。

animation-timing-function的使用格式：

animation-timing-function : value [, value]

可以设置多个值。每个值都是字符串。

animation-timing-function可以使用下面的值：

• ease
  又快到慢，这是默认值。
• linear
  恒速
• ease-in
  速度越来越快
• ease-out
  速度越来越慢
• ease-out
  速度先变快后又变慢
• cubic-bezier(n,n,n,n)
  使用贝塞尔曲线方程式，随意指定四个参数。上面的5个方式都是特定参数的贝塞尔曲线。 贝塞尔曲线在计算机图形学中有着广泛的应用，在绘图工具PS、Sketch中你都会遇到它。 本来它是让图形边缘变得不再是直的，从而绘制光滑的曲线，把它应用到速度变化上， 能够让速度变化是连贯的，而不是突兀和生硬的！

animation-iteration-count设置动画播放次数。

animation-iteration-count的使用格式：

animation-iteration-count : n | infinite

n是自然数。

infinite表示无限循环。

animation-direction设置动画执行方向。

animation-direction的使用格式：

animation-direction : normal | alternate

normal表示依次执行每一帧。

alternate本意是摇摆，表示奇数帧正常播放，而在偶数帧向后播放。这样就像钟摆一样，是对称的。

animation属性是复合属性。它由下面这些属性组合而成：

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

animation的使用格式：

animation : single-animation [, single-animation]

这表示可以设置多段，每一段时间用逗号隔开。每一段的格式如下：

animation-name animation-duration [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction]

示例：

@keyframes 'wobble' {
    0% {
        margin-left: 100px;
        background: green;
    }
    40% {
        margin-left: 150px;
        background: orange;
    }
    60% {
        margin-left: 75px;
        background: blue;
    }
    100% {
        margin-left: 100px;
        background: red;
    }
}

.sliding-menu {
    animation: wobble 2s linear 200ms infinite alternate;
}