CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのanimation-iteration-countプロパティでアニメーションの再生回数を設定する方法

CSSでアニメーションの再生回数を設定するには

CSSでアニメーションを何回再生するかを指定するには、animation-iteration-count プロパティを使用します。このプロパティに数値を設定すると、アニメーションがその回数だけ繰り返し再生されます。

なお、値に infinite を指定すると、アニメーションを無限に繰り返すこともできます。

サンプルコード

次の例では、animation-iteration-count を「3」に設定しています。そのため、アニメーションは3回再生された後に停止します。あわせて animation-timing-function によって、イージング（速度変化）の違いも確認できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 200px;
            position: relative;
            background-color: yellow;
            animation-name: myanim;
            animation-duration: 2s;
            animation-direction: alternate-reverse;
            animation-iteration-count: 3;
         }
         @keyframes myanim {
            from {left: 100px;}
            to {left: 200px;}
         }
         #demo1 {animation-timing-function: ease;}
         #demo2 {animation-timing-function: ease-in;}
      </style>
   </head>
   <body>
      <div id = "demo1">ease effect</div>
      <div id = "demo2">ease-in effect</div>
   </body>
</html>

ポイントまとめ

  • animation-iteration-count: 3; … アニメーションを3回繰り返す
  • animation-iteration-count: infinite; … アニメーションを無限に繰り返す
  • 再生回数は animation-duration（1回あたりの再生時間）と組み合わせて調整するのが一般的です
  1. CSSのgrid-templateプロパティの使い方を徹底解説！行・列・エリアの一括設定方法

    grid-templateプロパティとは CSSのgrid-templateプロパティは、グリッドレイアウトにおける行数・列数・各エリア（領域）をまとめて指定できるショートハンドプロパティです。個別にgrid-template-rowsやgrid-template-columnsを設定する代わりに、このプロパティひとつでグリッド構造全体を簡潔に定義できます。 グリッドテンプレートを設定する際は、行と列の数を指定し、あわせてグリッドレイアウト内のエリアも定義します。 grid-templateの構文 grid-templateプロパティの書式は以下のとおりです。 grid-template:

  2. CSSのpositionプロパティを使って要素を自在に整列する方法

    CSSでは、positionプロパティとtop・right・bottom・leftなどのオフセットプロパティを組み合わせることで、要素を思い通りの位置に整列させることができます。 positionプロパティで使える主な値 static — 初期値。通常の文書フローに従って配置され、オフセットプロパティは無効になります。 relative — 要素の本来あるべき位置を基準に、相対的にずらして配置します。 absolute — positionが指定された直近の親要素を基準に、絶対的な位置へ配置します。 fixed — ブラウザのビューポート(表示領域)を基準に固定され、スクロールしても動きませ