61

次のスタイルは、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;
}
4

2 に答える 2

108

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;
}

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

于 2012-11-09T14:19:42.970 に答える
10

「変換」プロパティが提供する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をご覧ください。

于 2019-08-13T20:16:29.053 に答える