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

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

CSSでアニメーションの実行回数を指定する

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

基本的な使い方

以下の例では、アニメーションの実行回数を「2」に設定しています。背景色が緑から青へと変化するアニメーションが、2回繰り返し再生されます。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 200px;
            background-color: yellow;
            animation-name: myanim;
            animation-duration: 2s;
            animation-iteration-count: 2;
         }
         @keyframes myanim {
         from {
            background-color: green;
         }
         to {
               background-color: blue;
            }
         }
      </style>
   </head>

   <body>
      <div> </div>
   </body>
</html>

コードの解説

  • animation-name: myanim; — 適用するアニメーションの名前（@keyframesで定義）を指定します。
  • animation-duration: 2s; — アニメーション1回あたりの再生時間を2秒に設定しています。
  • animation-iteration-count: 2; — アニメーションを2回繰り返すよう指定しています。

補足：無限に繰り返したい場合

アニメーションを永続的に繰り返したい場合は、animation-iteration-count: infinite; を指定します。数値の代わりに infinite キーワードを使うことで、ページが表示されている間ずっとアニメーションが再生され続けます。

  1. CSSだけ背景色がループするアニメーションを作る方法【初心者向け】

    CSSの@keyframesと各種アニメーションプロパティを使えば、JavaScript不要の純粋なCSSだけで、背景色が滑らかにループするアニメーションを作成できます。この記事では、初心者にもわかりやすい手順でその実装方法を解説します。 この例では、HTMLの<body>要素に直接CSSを適用していますが、紹介するコードは任意のHTML要素、クラス、IDに対しても同じように応用できます。 完成版のコード 完成形を確認したい方は、こちらのデモを参考にしてください。 注意：このコードはInternet Explorer 9では動作しません。モダンブラウザでの利用を前提としています。

  2. CSSだけで作るタイプライターアニメーションの実装方法を解説

    CSSアニメーションを活用すれば、テキストが一文字ずつ打ち込まれていくような「タイプライターアニメーション」を実現できます。JavaScriptに頼らなくても、CSSのsteps()関数と@keyframesを組み合わせるだけで、この演出効果を簡単に作ることが可能です。以下に、その具体的な実装例を紹介します。タイプライターアニメーションの仕組みこのアニメーションでは、主に次のCSSテクニックを組み合わせています。steps()関数：アニメーションをなめらかに変化させるのではなく、段階的に（カクカクと）進めることで、文字が一つずつ打ち込まれるような動きを表現します。overflow: hidde