animation基本用法（css方式和原始js方式）

浏览器支持：

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。（仅支持现代浏览器）

定义：

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

• animation-name
• animation-duration（时间：动画时间。不定义或者为0都是无法播放动画）
• animation-timing-function
• animation-delay（延迟时间）
• animation-iteration-count（是否重复及重复次数）
• animation-direction（是否轮流反向播放）

用法:

（css版)animation: name duration timing-function delay iteration-count direction;

（js版）object.style.animation="name duration timing-function delay iteration-count direction"

animation-name属性：

为@keyframes动画提供名称☞animation-name：keyframename|none;（为空则无动画效果，通过设置为空可使得动画停止）

(js方式)obj.style.animationName="nema"|“none”;（亲测有效O(∩_∩)O）

animation-duration属性：

定义动画完成一个周期所需要的时间，以秒或毫秒计（加s为秒直接接数字为毫秒）☞animation-duration: time;（time默认值为0，意味着没有动画效果;j将time设置为0也可以停止动画）

（js方式）object.style.animationDuration="time"；（亲测有效O(∩_∩)O）

animation-timing-function属性：

规定动画的速度曲线（动画从开始到介绍中间的运动|变化的速率）☞animation-timing-function: value;（需要单独规定，不在animation里，并且要注意适配浏览器）value取值及含义：

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

animation-delay 属性：

定义动画事件触发后延迟多久开始。☞animation-delay: time;（time可以为负值，为负值则是超前开始，触发后动画出现的位置是已经运动了该时间后的位置。）

（js方式）object.style.animationDelay="time"；

animation-iteration-count 属性：

定义动画的播放次数☞animation-iteration-count:n|infinite;(n为重复播放的次数，infinite是无限次播放)

（js方式）obj.style.animationIterationCount=n|infinite；（将n设置为1，则在运动完一次后面动画停下。或者是0，直接停下）

animation-direction 属性：

定义是否应该轮流反向播放动画（奇数正常播放，偶数反向播放）☞animation-direction：normal|alternate；（前者为默认值：正常播放，后者则轮流反向播放）

（js方式）obj.style.animationDirection="alternate";(与楼上重复次数一同食用效果更佳)

默认animation参数详解：

animation:mymove 5s infinite;

解析（mymove☞animation-name，5s☞animation-duration，infinite☞animation-iteration-count。）

@keyframes mymove
{
from {left:0px;}      from{background：#000；top：10px；}
to {left:200px;}     to{background：#fff；top：10px}改变颜色位置不变。(亲测有效)
}

解析（运动模块的始末位置及状态）

注意:

运动模块需要设置position：relative；

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