キーフレームアニメーション - インスタント変更

Question

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

たとえば、背景色が50％から100％に変化し、アニメーションは、50％から100％に果たしていると。私が達成しようとしている何

は、値の変更の「インスタント」タイプのアニメーションを行う方法..です

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

私の用語が正しいか間違っているか分かりませんが、いずれの場合でも完璧な方向があります。

あなたが次のキーフレームまでアニメーションを一時停止し、あなたのタイミング関数として stepsを使用することができます

Answer 1

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/

Answer 2

A非常に単純な解決策はを追加することができますあなたの要素に、その後、@keyframesセクションで：

%0 { 
    background-color: blue; 
} 

はそれを試してみてください。jsFiddle

私は再び右の前に、ちょうどこの問題を抱えていたし、開始時の初期値をマークすることによって、ラウンド、それを持って、

Answer 3

変更が即座に発生するようにしました。下記を参照してください。

@-webkit-keyframes image2 { 
    0% {opacity: 1;} 
    24.99% {opacity: 1;} 
    25% {opacity: 0;} 
    100% {opacity: 0;} 
}