CSS3动画 (css代码生成工具)

一、 keyframes动画

CSS内容：

from {background: red;} to {background: yellow;}

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

规定 @keyframes 动画的名称。

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

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

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

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

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

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

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

二、 transition动画

CSS内容：

display:block;border:1px solid #999; border:4px solid #ff0000;

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

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

变化项（比如颜色、高度的变化）