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 的数值。 |
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;