Web Animation APIでアニメーションの繰り返しを指定できる、iterations(イテレーション)とiterationStartについて

  • マンツーマン個別講義開催中!

    勉強に行き詰まっていませんか?
    エラーの解消から、実装方法まで丁寧に教えます!
    講師が答えられるなら、基本的にどんな内容でもOK!

    詳細はこちら!
  • スクール形式講義

    プロを目指す方・講義を何回も受けられる方はこちら
    個別のカリキュラムを作成し、長期的にサポート!

    詳細はこちら!
この動画では、Web アニメーションAPI (Web Animations API) の一部であるアニメーションの繰り返し(イテレーション)に焦点を当てています。
このプロパティにより、アニメーションが指定された回数だけ繰り返されます。たとえば、iterations: 2 と設定すると、アニメーションが2回実行されます。無限に繰り返す場合は Infinity(無限大)を使用します。これによりアニメーションが終わらずに続きます。

また、iterationStart オプションの使用方法についても説明しています。このオプションを使用することで、アニメーションが途中の特定の地点から開始するように設定できます。例えば、アニメーションが左から右へ300ピクセル移動する場合、iterationStart: 0.5 を設定すると、150ピクセルの地点からアニメーションが開始されます。

この動画は、Webアニメーションに関する基本的な知識を提供し、初学者が理解しやすいように、簡潔でわかりやすい説明を心掛けています。キーフレーム、アニメーションの時間指定、拡大縮小や回転などのアニメーション効果に関する基本的な説明も含まれています。

関連する動画リスト

もっとみる