【CSS3动画】
首先通过@keyframe创建动画
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
或
@keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} }
然后通过animation属性来指定动画
div
{
animation: myfirst 5s;
}
【animation-fill-mode】
animation-fill-mode : none | forwards | backwards | both;
| 值 | 描述 |
|---|---|
| none | 不改变默认行为。 |
| forwards | 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 |
| backwards | 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 |
| both | 向前和向后填充模式都被应用。 |
参考：
1、http://www.w3school.com.cn/css3/css3_animation.asp
2、http://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp
原文：http://www.cnblogs.com/tekkaman/p/7425485.html