次のスタイルは、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;
}
CSSトランジションは、あるスタイルセットから別のスタイルセットにのみアニメーション化します。探しているのは CSSアニメーション です。
アニメーションキーフレームを定義し、要素に適用する必要があります。
@keyframes changewidth {
from {
width: 100px;
}
to {
width: 300px;
}
}
div {
animation-duration: 0.1s;
animation-name: changewidth;
animation-iteration-count: infinite;
animation-direction: alternate;
}
上記のリンクをチェックして、好みに合わせてカスタマイズする方法を見つけてください。ブラウザのプレフィックスを追加する必要があります。
「変換」プロパティが提供する60FPSの滑らかさを活用したい場合は、次の2つを組み合わせることができます。
@keyframes changewidth {
from {
transform: scaleX(1);
}
to {
transform: scaleX(2);
}
}
div {
animation-duration: 0.1s;
animation-name: changewidth;
animation-iteration-count: infinite;
animation-direction: alternate;
}
変換がよりスムーズな移行を提供する理由の詳細については、こちらをご覧ください。 https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108