ループ内のCSS3トランジションを再生するには？

Question

次のスタイルは、CSS3でトランジションを設定する方法の単なる例です。
純粋なCSSトリックがループ内で再生されるようになっていますか？

div { 
    width:100px; 
    height:100px; 
    background:red; 
    transition:width 0.1s; 
    -webkit-transition:width 0.1s; /* Safari and Chrome */ 
    -moz-transition:width 0.1s; /* Firefox 4 */ 
    -o-transition:width 0.1s; /* Opera */ 
    transition:width 0.1s; /* Opera */ 
} 

div:hover { 
    width:300px; 
} 

Answer 1

CSSトランジションは、あるスタイルセットから別のスタイルセットにのみアニメートされます。あなたが探しているものはCSS animationsです。

あなたはアニメーションのキーフレームを定義し、要素に適用する必要があります。

@keyframes changewidth { 
    from { 
    width: 100px; 
    } 

    to { 
    width: 300px; 
    } 
} 

div { 
    animation-duration: 0.1s; 
    animation-name: changewidth; 
    animation-iteration-count: infinite; 
    animation-direction: alternate; 
} 

は、お好みに合わせてカスタマイズする方法を見つけ出すために上記のリンクをチェックアウトし、ブラウザのプレフィックスを追加する必要があります。