css动画animation大杂烩

大杂烩"/>

css动画animation大杂烩

css动画
//简写总和（常用）
animation: myfirst 5s linear 2s infinite alternate;
说明：myfirst(播放的@keyframes名称) 5s(动画播放时间) linear(速度曲线、从头到尾都相同) 2s(延迟2s播放) infinite(无限重复播放) alternate(动画在下一周期需要反向播放)

//规定是否应该轮流反向播放动画

• Animation-direction:alternate; //奇数次正常播放（1、3、5…）偶数次反向播放
• Normal //正常播放

//动画播放状态
animation-play-state: paused|running； //暂停|正在播放
//动画何时开始（允许负值）
animation-delay:2s; //延迟两秒播放
//动画播放速度曲线
animation-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)
动画从头到尾的速度是相同的 || 默认。动画以低速开始，然后加快，在结束前变慢。||
动画以低速开始。 动画以低速结束。 动画以低速开始和结束。
在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

//动画的演示时间
animation-duration:2s;
//动画的播放次数
animation-iteration-count:3|infinite; //无限次重复播放

CSS3 动画属性
下面的表格列出了 @keyframes 规则和所有动画属性：
属性 描述 CSS
@keyframes 规定动画。 3