CSSでアニメーションを無限に繰り返すinfiniteの使い方を現役エンジニアが解説【初心者向け】

CSSでアニメーションを無限に繰り返すinfiniteの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

 

アニメーションで設定できる項目

CSSでアニメーションを設定する項目は以下のようになります。

animation-name

アニメーションの名前(好きな名前)

animation-name:expansion; /*keyframeで指定する名前*/

 

animation-duration

アニメーション1回あたりの時間(秒)

animation-duration:1s; /*1秒間でアニメーションを完了する*/

 

animation-timing-function

アニメーションの進行速度、加速度など(キーワードなど)

animation-timing-function:ease-in; /*ease-inは最初ゆっくりで後半に減速*/
animation-timing-function:ease-out; /*ease-outは最初早くてで後半に加速*/

その他にも、ease-in-out、linearなどのキーワードで指定可能です。

 

animation-delay

アニメーション開始までの時間(秒)

animation-delay:1s; /*1秒後にアニメーション開始*/

 

animation-iteration-count

アニメーションを再生する回数

animation-iteration-count:3; /*アニメーションを3回再生する*/

 

animation-direction

アニメーション再生、順方向・逆方向・反転など(キーワード)

animation-direction:normal; /*順方向に再生する*/

animation-direction:reverse; /*逆方向に再生する*/

animation-direction:alternate; /*順方向→逆方向の順で再生する*/

animation-direction:alternate-reverse; /*逆方向→順方向の順で再生する*/

 

animation-fill-mode

アニメーションの前後にスタイルを適用するかどうか(キーワード)

animation-fill-mode:none; /*スタイルを指定しない*/

animation-fill-mode:backwords; /*アニメーションの終了後に最初のキーフレームのスタイルを適用する*/

animation-fill-mode:forwards; /*アニメーションの終了後には最後のキーフレームのスタイルを適用する*/

 

animation-play-state

アニメーションが再生か停止を設定する(キーワード)

animation-play-state:running; /*再生*/

animation-play-state:paused; /*停止*/

コーディングの例

HTML

<span id="box"></span>

CSS

#box{
  display:block;
  width:10px;
  height:100px;
  background:gold;
  animation-name:expansion;
  animation-duration:2s;
  animation-timing-function:ease-in;
  animation-delay:1s;
  animation-iteration-count:3;
  animation-direction:alternate;
  animation-fill-mode:forwards;
  animation-play-state:running;
}
@keyframes expansion{
  0%{
    width:10px;
  }
  100%{
    width:300px;
    background:tomato;
  }
}

表示を確認してみましょう。

 

また、これらのアニメーションプロパティはanimationプロパティで一括で指定することも可能です。

CSS

#box{
  display:block;
  width:10px;
  height:100px;
  background:gold;
  animation:2s ease-in 1s 3 alternate forwards running expansion;
}
@keyframes expansion{
  0%{
    width:10px;
  }
  100%{
    width:300px;
    background:tomato;
  }
}

 

再生を無限に繰り返すには

animation-iteration-countをinfiniteに設定します。

infiniteは無限という意味です。

animation-iteration-countは好きな数字で回数を設定することが可能です。

整数だけではなく、1.5などの小数点も使用できます。

 

[PR] Webデザインで副業する学習方法を動画で公開中

アニメーションの繰り返し回数を無限にしてみよう

先ほどのアニメーションを無限に変えてみましょう。

CSS

#box{
  display:block;
  width:10px;
  height:100px;
  background:gold;
  animation:2s ease-in 1s infinite alternate forwards running expansion;
}
@keyframes expansion{
  0%{
    width:10px;
  }
  100%{
    width:300px;
    background:tomato;
  }
}

 

 

執筆してくれたメンター

メンター 橋本真理 フリーのweb/グラフィックデザイナー。 会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動、TechAcademyではWebデザインコース・WordPressコースを担当しています。 ラジオとバナナが好き。

 

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので参加してみてください。