13

時間の経過とともに div の色が変化する小さな背景アニメーションを作成しました。スムーズに動作しますが、100% になると遷移なしで 0% にジャンプします。私はグーグルで検索し、アニメーションを行うさまざまな方法を試しましたが、アニメーションの場合、流動的な「再起動」を得ることができませんでした.

私は何が欠けていますか？

-webkit-animation: pulsate 20s infinite;
animation: pulsate 20s infinite;
-moz-animation: pulsate 20s infinite;

            @-webkit-keyframes pulsate {
                0% {background: @black}
                25% {background: @red}
                50% {background: @blue}
                75% {background: @orange}
                100% {background: @green}
            }


            @keyframes pulsate {
                0% {background: @black}
                25% {background: @red}
                50% {background: @blue}
                75% {background: @orange}
                100% {background: @green}
            }

            @-moz-keyframes pulsate {
                0% {background: @black}
                25% {background: @red}
                50% {background: @blue}
                75% {background: @orange}
                100% {background: @green}
            }
4

2 に答える 2

13

別の方法でフレームを修正する必要があります: from(0%) とto(100%) の値を同じにします:

html, body {   
    width: 100%; height: 100%;
    margin: 0;
    padding: 0;
}
body {
    -webkit-animation: pulsate 20s linear infinite;
    -moz-animation: pulsate 20s linear infinite;
    animation: pulsate 20s linear infinite;
}

@-webkit-keyframes pulsate {
    0% {background: black}
    20% {background: red}
    40% {background: blue}
    60% {background: orange}
    80% {background: green}
    100% {background: black}
}
@-moz-keyframes pulsate {
    0% {background: black}
    20% {background: red}
    40% {background: blue}
    60% {background: orange}
    80% {background: green}
    100% {background: black}
}
@keyframes pulsate {
    0% {background: black}
    20% {background: red}
    40% {background: blue}
    60% {background: orange}
    80% {background: green}
    100% {background: black}
}

于 2013-10-16T12:55:56.887 に答える
7

再び 0% に戻るのではなく、前後に実行するanimation-directionように設定できるプロパティがあります。alternate

-webkit-animation: pulsate 20s infinite alternate;
animation: pulsate 20s infinite alternate;
-moz-animation: pulsate 20s infinite alternate;

編集: zessx は、再び削除する前にフィドルを投稿しました。alternateオプションでそれを更新しました。正常に動作します。フィドル

于 2013-10-16T12:56:23.607 に答える