CSS アニメーション遅延をすべての反復に適用するにはどうすればよいですか?

CSS アニメーションの遅延: すべての反復への適用

遅延のある CSS アニメーションを使用すると、遅延が単に遅延するだけの問題が発生する可能性があります。最初の反復に適用されると、アニメーションが必要な間隔なしで継続的に繰り返されます。

この問題を解決するには、次のことができます。別のアプローチを採用します:

@keyframes expbarshine {
  from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  80% {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}

ここでは、80% のキーフレームが from キーフレームと同一であるため、アニメーション全体の長さの 80% の「遅延」が効果的に作成されます。

提案されているように経験豊富なユーザーによると、次のアプローチも使用できます。

@-webkit-keyframes pan {
   0%, 10%       { -webkit-transform: translate3d( 0%, 0px, 0px); }
   90%, 100%     { -webkit-transform: translate3d(-50%, 0px, 0px); }
}

この方法では、両方の「遅延」に対応するために偽の期間を作成します。アニメーションが終了します。

以上がCSS アニメーション遅延をすべての反復に適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。