CSS3动画

【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