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

初心者向けにCSSでアニメーションを無限に繰り返すinfiniteの使い方について解説しています。まず、CSSのアニメーションで設定できる項目と書き方についてそれぞれ紹介します。次に、再生を無限に繰り返す場合の書き方と実際の例を見てみましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

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

 

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

 

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

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

アニメーションを無限に繰り返すinfiniteの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

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

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] HTML/CSSで挫折しない学習方法を動画で公開中

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

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

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コースを担当しています。

ラジオとバナナが好き。

 

大石ゆかり

CSSでアニメーションを無限に繰り返すinfiniteの使い方がよくわかったので良かったです!

田島悠介

ゆかりちゃん、今後も分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

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

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