CSS3动画animation

一、创建动画前首先我们要了解什么是 animation

animation 是 css3 的新属性，尚处于实验阶段，各种不同内核的浏览器都在进行试验中，也就是说 animation 在不同的浏览器中其支持程度、运行效果等方面是存在差别的，因此为了保证网页在各种浏览器中的兼容性，就要给 animation 添加各种浏览器特有的前缀，比如说 -webkit-animation 只有 webkit 内核的浏览器才能识别并执行，其他则会自动忽略。

目前，IE10+、Firefox 以及 Opera 都已支持标准的 animation 属性，而 Safari 和 Chrome（它们都是 webkit 内核）则只支持 -webkit-animation 属性，所以你的代码简写成以下即可：

-webkit-animation: animations 2s ease-out 1s backwards;
animation: animations 2s ease-out 1s backwards;

1.1 animation 的语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

1.2 animation 的取值：

animation-name / animation-duration / animation-timing-function / animation-delay / 
animation-iteration-count / animation-direction / animation-fill-mode / animation-play-state / 

animation-name:

指定要绑定到选择器的关键帧的名称

animation-duration：

动画花费的时间，设置为 0 则不执行

time:       指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果。

animation-timing-function：

指定动画将如何完成一个周期。

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

animation-delay：

动画延迟开始时间 设置为 0 则不延迟

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

animation-iteration-count：

定义动画的循环次数

n：         一个数字，定义应该播放多少次动画
infinite：  指定动画应该播放无限次（永远）

animation-direction：

定义是否循环交替反向播放动画。

normal:                 默认值。动画按正常播放。
reverse:                动画反向播放。
alternate:          动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse:  动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
initial:                设置该属性为它的默认值。    
inherit:                从父元素继承该属性。

animation-fill-mode

定义当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

none:        默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards:    在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards:   动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都 
             是from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键
             帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。
both:        动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
initial:     设置该属性为它的默认值。
inherit:     从父元素继承该属性。

animation-play-state

指定动画是否正在运行或已暂停。

paused      指定暂停动画
running     指定正在运行的动画

二、了解 animation 后我们在来谈谈如何创建动画：

第一步：

首先我们要通过 @keyframes 来创建动画，同时必须还要跟上动画名称，比如 mycolor

其次再指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式

例：

@keyframes mycolor {

    /* 起始 */
    from {
        background-color: darkseagreen;
    }

    /* 结束 */
    to {
        background-color: deeppink;
    }
}

第二部：

通过 animation 绑定到选择器中，同时至少要有动画名称和动画变化的时长

为了更精确的效果，可将 from、to 改为百分数

如：