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

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

animation-iteration-countプロパティの基本

CSSのanimation-iteration-countプロパティは、アニメーションを何回再生するかを指定するためのプロパティです。この値を設定することで、アニメーションを1回だけ実行するのか、複数回繰り返すのか、あるいは無限にループさせるのかを細かく制御できます。

主な指定できる値は以下のとおりです。

  • 数値：アニメーションの再生回数を整数または小数で指定します（例：3）。
  • infinite：アニメーションを無限に繰り返します。
  • 初期値：デフォルトは 1 です。

animation-iteration-countの使用例

次のコードでは、animation-iteration-count: 3; を指定することで、アニメーションが3回繰り返し再生されます。実際にブラウザで動かして、挙動を確認してみてください。

サンプルコード

<!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>

コードの解説

このサンプルコードのポイントは以下のとおりです。

  • @keyframes myanim で、要素が左から100pxの位置から200pxの位置へ移動するアニメーションを定義しています。
  • animation-duration: 2s; により、1回のアニメーションにかかる時間は2秒に設定されています。
  • animation-direction: alternate-reverse; を指定することで、逆方向から開始し、往復しながらアニメーションが再生されます。
  • animation-iteration-count: 3; の指定により、この一連の動きが合計3回繰り返されます。
  • #demo1 には ease、#demo2 には ease-in のタイミング関数が適用され、それぞれ異なる加速・減速の挙動を確認できます。

まとめ

animation-iteration-countプロパティを使えば、CSSアニメーションの再生回数を自由に制御できます。数値で回数を指定するだけでなく、infiniteを設定すれば無限ループのアニメーションも簡単に実現できます。ローディング演出や装飾的な動きなど、さまざまな場面で活用してみてください。

  1. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し

  2. CSSのpointer-eventsプロパティとは？使い方をコード例で解説

    pointer-eventsプロパティとは CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。 このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。 auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。 none：要素がポインターイベントに反応しなくなります