最简化模型——css3分阶段动画效果，经过实测

body {

background: #dcdcdc;

-webkit-animation: colorin 5s; /* chrome调用属性 */

animation: colorin 5s; /* firefox可调用的属性，最基本的要给出动画帧的名称和持续时间，才会有动画效果 */

}

@-webkit-keyframes colorin{/*注意：@-webkit-keyframes是兼容chrome的动画写法(否则在chrome中无动画效果)，要用-webkit-animation属性来调用*/

/* You could think of as "step 1" */

0% {

background: orange;

}

/* You could think of as "step 2" */

100% {

background: black;

}

}

@keyframes colorin{

/* You could think of as "step 1" */

0% {

background: orange;

}

/* You could think of as "step 2" */

100% {

background: black;

}

}