11

CSS3のキーフレームアニメーションについて学び始めました。私が気付いたのは、キーフレームアニメーションでどのように「時間」を設定しても、遷移は常にスムーズであるということです。

例えば; 背景色が50％から100％に変化すると、アニメーションが50％から100％に再生されるため、スムーズに移行できます。

私が達成しようとしているのは、「インスタント」タイプの値の変更を使用してアニメーションを実行する方法です。

ここでも、例は次のようになります。BGの50％の値が赤で、BGの100％の値が青の場合。アニメーションは100％に達するまで赤のままで、100％完了するとすぐに青に変わります。

私の用語が正しいか間違っているかはわかりませんが、いずれにせよ、ある方向性は完璧でしょう。

4

3 に答える 3

22

ステップをタイミング関数として使用して、次のキーフレームまでアニメーションを一時停止できます

CSS:

    -webkit-animation-timing-function: steps(1, end);
    -moz-animation-timing-function: steps(1, end);
    -ms-animation-timing-function: steps(1, end);
    -o-animation-timing-function: steps(1, end);
    animation-timing-function: steps(1, end);

サンプルコード:

@keyframes quick {
    0% {
        background-color:green;
    }
    50% {
        -webkit-animation-timing-function: steps(1, end);
        -moz-animation-timing-function: steps(1, end);
        -ms-animation-timing-function: steps(1, end);
        -o-animation-timing-function: steps(1, end);
        animation-timing-function: steps(1, end);
        background-color:blue;
    }
    100% {
        background-color:red;
    }
}
@-o-keyframes quick {
    0% {
        background-color:green;
    }
    50% {
        -o-animation-timing-function: steps(1, end);
        background-color:blue;
    }
    100% {
        background-color:red;
    }
}
@-moz-keyframes quick {
    0% {
        background-color:green;
    }
    50% {
        -moz-animation-timing-function: steps(1, end);
        background-color:blue;
    }
    100% {
        background-color:red;
    }
}
@-webkit-keyframes quick {
    0% {
        background-color:green;
    }
    50% {
        -webkit-animation-timing-function: steps(1, end);
        background-color:red;
    }
    100% {
        background-color:blue;
    }
}
body {
    height:100%;
    width:100%;
    animation:quick 3s;
    -moz-animation:quick 3s;
    -webkit-animation:quick 3s;
    -o-animation:quick 3s;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

http://jsfiddle.net/sC5fy/1/

于 2013-01-26T13:29:48.627 に答える
-1

非常に単純な解決策はbackground-color: red、要素に追加してから、次の@keyframesセクションに追加することです。

%0 {
  background-color: blue;
}

試してみてください：jsFiddle

于 2013-01-26T13:38:51.380 に答える