uucat.com 站点工具 - 涂鸦 -
http://www.w3school.com.cn/css3/css3_animation.asp



一、 keyframes动画

CSS内容:

0%{background:#f00;}
30%{background:#ff0;}
100%{background:#00f;}
animation-name:

规定 @keyframes 动画的名称。

animation-duration:

规定动画完成一个周期所花费的秒或毫秒。默认是 0。

规定动画的速度曲线。默认是 "ease"。(linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) )

animation-delay:

规定动画何时开始。默认是 0。

animation-iteration-count:

(数字 | infinite:无限播放)规定动画被播放的次数。默认是 1。

animation-direction:

(normal|alternate) 规定动画是否在下一周期逆向地播放。默认是 "normal"。

animation-play-state:

(paused|running)规定动画是否正在运行或暂停。默认是 "running"。

animation-fill-mode:

(none | forwards | backwards | both) 规定对象动画时间之外的状态。





二、 transition动画

CSS内容:


样式表名称

规定动画完成一个周期所花费的秒或毫秒。默认是 0。

animation-name:

animation-name:

规定动画的速度曲线。默认是 "ease"。(linear | ease | ease-in | ease-out | ease-in-out )

animation-name:

变化项(比如颜色、高度的变化)