最简化模型——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;
    }
}