html - CSS3动画和过渡在一起

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

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秒的“平滑度”（缓和），但是，看起来动画将完全控制背景色。

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

最佳答案

增加步骤数可以有效steps(36,end)

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

关于html - CSS3动画和过渡在一起，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14537947/