Question

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

/* 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 Transitions，例如它是: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;
    }
}

（edited JSFiddle example）

CSS3动画和一起过渡

2 个答案: