CSS3で回転するようにキーフレームをアニメーション化する

Question

私はステップを使って連続スピンアニメーション（無限）の簡単な例を試していますが、状態間で滑らかな移行を行うことはできません。 私は、0〜360度のテキストボックスの回転（無限）をアニメーション化し、各ステップの間にポーズを入れます：demo jsfiddle。 しかし、ジャンプは瞬時に、私はそれらをスムーズに移行させることはできません。 CSSのみを使用してこれをどのように達成できますか？

私のコード今のところです：

<input type="text" id="textbox" class='textbox animate' value="Text box"/> 


body, html { 
    width: 100%; 
    height: 100%; 
    background: #ccc; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction:column; 
} 
input { 
    margin-top: 70px; 
    clear: both; 
} 

.textbox { 
    width: auto; 
    display:block; 
    text-align: center; 
} 

.textbox.animate { 
    animation:spin 30s steps(30, end) infinite; 
    transition: rotate 0.3s ease; 
} 
@keyframes spin { 
    100% { transform: rotate(360deg); } 
} 

Answer 1

ハリーで言ったように、あなたの更新fiddle here

あなたのCSSはこのようになります

チェックアウト、とここでキーフレームアニメーションを追加する必要があります

.textbox.animate { 
    -webkit-animation: circle infinite .75s linear; 
     -moz-animation: circle infinite .75s linear; 
     -o-animation: circle infinite .75s linear; 
      animation: circle infinite .75s linear; 
    transition: rotate 0.3s ease;} 

@-webkit-keyframes circle 
{ 
    0% 
     { 
      -webkit-transform: rotate(0); 
       -ms-transform: rotate(0); 
       -o-transform: rotate(0); 
        transform: rotate(0);} 
    100% 
     { 
      -webkit-transform: rotate(360deg); 
       -ms-transform: rotate(360deg); 
       -o-transform: rotate(360deg); 
        transform: rotate(360deg);}} 
@-moz-keyframes circle 
{ 
    0% 
     { 
      -webkit-transform: rotate(0); 
       -ms-transform: rotate(0); 
       -o-transform: rotate(0); 
        transform: rotate(0);} 
    100% 
     { 
      -webkit-transform: rotate(360deg); 
       -ms-transform: rotate(360deg); 
       -o-transform: rotate(360deg); 
        transform: rotate(360deg);}} 
@-o-keyframes circle 
{ 
    0% 
     { 
      -webkit-transform: rotate(0); 
       -ms-transform: rotate(0); 
       -o-transform: rotate(0); 
        transform: rotate(0);} 
    100% 
     { 
      -webkit-transform: rotate(360deg); 
       -ms-transform: rotate(360deg); 
       -o-transform: rotate(360deg); 
        transform: rotate(360deg);}} 
@keyframes circle 
{ 
    0% 
     { 
      -webkit-transform: rotate(0); 
       -ms-transform: rotate(0); 
       -o-transform: rotate(0); 
        transform: rotate(0);} 
    100% 
     { 
      -webkit-transform: rotate(360deg); 
       -ms-transform: rotate(360deg); 
       -o-transform: rotate(360deg); 
        transform: rotate(360deg);}} 

Answer 2

あなたが達成しようとしている効果は、私が知っている限り、steps() functionで達成できるものではありません。なぜなら、階段関数はアニメーションの各ステップ間に1つの急なジャンプを持つ階段ケースのように機能するからです。

ステップの開始点と終了点の間に滑らかな動きがあり、次のステップが始まるまで一時停止するように手動でキーフレームを書き込む必要があります。以下のスニペットは、これを行い、これがどのようである：

• 0％では、回転が0度として指定され、アニメーションの持続時間の1.66パーセントで、回転が12度（1/30）として指定されています。これは0degから12degへの滑らかな回転があることを意味します。
• 1.66％と3.33％の両方で、回転は12度として指定されます。したがって、これら2つの状態の間には回転はありません（一時停止）。
• 4.99％で、回転は24度として指定されます。したがって、3.33％と4.99％との間で、要素は12°から24°に徐々に回転します。それから6.65％まで、それは同じ位置にとどまっています。

私は、キーフレームセレクタ（パーセント値）を番号に基づいて選択しました。ステップの合計30ステップでなければならないので、各ステップ（回転+一時停止）は3.33％スパン以上にする必要があります。その後、回転と一時停止の時間が等しくなるため、回転が完了すると1.66％、一時停止が完了すると3.33％になります。

40ステップが必要な場合は、回転を9度ずつ増やし、各ステップはアニメーションの持続時間の2.5％以上にする必要があります。したがって、回転は1.25％で終了し、停止は2.5％で終了します（次の回転は3.75％で終了し、停止は5％で終了します）。

body, 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #ccc; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
} 
 
input { 
 
    margin-top: 70px; 
 
    clear: both; 
 
} 
 
.textbox { 
 
    width: auto; 
 
    display: block; 
 
    text-align: center; 
 
} 
 
.textbox.animate { 
 
    animation: spin 30s linear infinite; 
 
} 
 
@keyframes spin { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    1.66%, 
 
    3.33% { 
 
    transform: rotate(12deg); 
 
    } 
 
    4.99%, 
 
    6.66% { 
 
    transform: rotate(24deg); 
 
    } 
 
    8.32%, 
 
    9.99% { 
 
    transform: rotate(36deg); 
 
    } 
 
    11.65%, 
 
    13.32% { 
 
    transform: rotate(48deg); 
 
    } 
 
    14.98%, 
 
    16.65% { 
 
    transform: rotate(60deg); 
 
    } 
 
    18.31%, 
 
    19.98% { 
 
    transform: rotate(72deg); 
 
    } 
 
    21.65%, 
 
    23.31% { 
 
    transform: rotate(84deg); 
 
    } 
 
    24.98%, 
 
    26.65% { 
 
    transform: rotate(96deg); 
 
    } 
 
    28.31%, 
 
    29.98% { 
 
    transform: rotate(108deg); 
 
    } 
 
    31.65%, 
 
    33.33% { 
 
    transform: rotate(120deg); 
 
    } 
 
    34.98%, 
 
    36.65% { 
 
    transform: rotate(132deg); 
 
    } 
 
    38.33%, 
 
    39.98% { 
 
    transform: rotate(144deg); 
 
    } 
 
    41.65%, 
 
    43.33% { 
 
    transform: rotate(156deg); 
 
    } 
 
    44.98%, 
 
    46.65% { 
 
    transform: rotate(168deg); 
 
    } 
 
    48.33%, 
 
    50% { 
 
    transform: rotate(180deg); 
 
    } 
 
    51.65%, 
 
    53.33% { 
 
    transform: rotate(192deg); 
 
    } 
 
    54.99%, 
 
    56.65% { 
 
    transform: rotate(204deg); 
 
    } 
 
    58.33%, 
 
    59.99% { 
 
    transform: rotate(216deg); 
 
    } 
 
    61.65%, 
 
    63.33% { 
 
    transform: rotate(228deg); 
 
    } 
 
    64.99%, 
 
    66.66% { 
 
    transform: rotate(240deg); 
 
    } 
 
    68.33%, 
 
    69.99% { 
 
    transform: rotate(252deg); 
 
    } 
 
    71.66%, 73.33% { 
 
    transform: rotate(264deg); 
 
    } 
 
    74.99%, 
 
    76.66% { 
 
    transform: rotate(276deg); 
 
    } 
 
    78.33%, 
 
    79.99% { 
 
    transform: rotate(288deg); 
 
    } 
 
    81.66%, 
 
    83.33% { 
 
    transform: rotate(300deg); 
 
    } 
 
    84.99%, 
 
    86.66% { 
 
    transform: rotate(312deg); 
 
    } 
 
    88.33%, 
 
    89.99% { 
 
    transform: rotate(324deg); 
 
    } 
 
    91.66%, 
 
    93.33% { 
 
    transform: rotate(336deg); 
 
    } 
 
    94.99%, 
 
    96.66% { 
 
    transform: rotate(348deg); 
 
    } 
 
    98.33%, 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<script> 
 
    function startAnimation() { 
 

 
    document.getElementById("textbox").className = "textbox animate"; 
 
    } 
 
</script> 
 

 
<input type="text" id="textbox" class='textbox animate' value="Text box" />