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)

工作小提琴http://jsfiddle.net/DeepakKamat/y2vWp/4/

Answer 2

如果元素的状态发生变化，则 CSS 转换触发，例如它被:hover编辑或从 JS 获得一个新类。CSS 动画的步骤不是状态变化，因此它们不会触发转换。也许这个解释是错误的，问题是一个属性不能同时被不同的机制激活。

如果需要步骤之间的平滑过渡，可以使用普通的线性动画代替步骤动画，如下所示：

@keyframes myAnim1 {
    0% {
        background-color: #212121;
    }
    45% {
        background-color: #212121;
    }
    50% {
        background-color: #31f4dc;
    }
    95% {
        background-color: #31f4dc;
    }
    100% {
        background-color: #212121;
    }
}

（编辑 JSFiddle 示例）