html - CSS3 动画和过渡一起

Question

这是我创建的测试以显示我的情况

http://jsfiddle.net/2vN2S/

/* Setting up the "myAnim1" for all browser types
-------------------------------------------------*/
 @keyframes myAnim1 {
    0% {
        background-color: #212121;
    }
    50% {
        background-color: #31f4dc;
    }
    100% {
        background-color: #212121;
    }
}
/* Firefox */
 @-moz-keyframes myAnim1 {
    0% {
        background-color: #212121;
    }
    50% {
        background-color: #31f4dc;
    }
    100% {
        background-color: #212121;
    }
}
/* Safari and Chrome */
 @-webkit-keyframes myAnim1 {
    0% {
        background-color: #212121;
    }
    50% {
        background-color: #31f4dc;
    }
    100% {
        background-color: #212121;
    }
}
/* Opera */
 @-o-keyframes myAnim1 {
    0% {
        background-color: #212121;
    }
    50% {
        background-color: #31f4dc;
    }
    100% {
        background-color: #212121;
    }
}
/* Attaching the animations to the elements
Notice the difference between timing!!
-------------------------------------------------*/

body {
    display:inline-block;

    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;

    animation:myAnim1  5s steps(2, end);
    -moz-animation:myAnim1 5s steps(2, end) infinite;
    -webkit-animation:myAnim1 5s steps(2, end) infinite;
}

如您所见，我已经设置了阶梯式动画和主体背景的过渡。我期望的是在动画的每个步骤之间创建 0.3 秒“平滑度”(缓动)的过渡，但是，看起来动画完全控制了背景颜色。

有什么方法可以轻松创建类似的东西吗？

Answer 1

增加步数 steps(36,end)

工作 fiddle http://jsfiddle.net/DeepakKamat/y2vWp/4/