1

これが私の状況を示すために作成したテストです

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 秒の「滑らかさ」(イージング) を作成する遷移でしたが、アニメーションが背景色を完全に制御しているように見えます。

そのようなものを簡単に作成する方法はありますか？

4

2 に答える 2

0

ステップ数を増やすとうまくいきますsteps(36,end)

ワーキングフィドルhttp://jsfiddle.net/DeepakKamat/y2vWp/4/

于 2013-01-26T14:47:06.407 に答える