【CSS】アニメーションを最後の状態で停止する方法

ウェブデザインにおいて、アニメーションはサイトやアプリケーションに動的で魅力的な要素を追加する素晴らしい手段です。しかし、時にはアニメーションが終了した時点で最後の状態で停止させたい場合があります。本記事では、CSSアニメーションを最後の状態で止める方法について解説します。

CSSアニメーションの定義

まず最初に、アニメーションを定義します。以下の例では、exampleAnimationという名前のアニメーションを作成し、要素にopacityプロパティを変化させるアニメーションを適用しています。

@keyframes exampleAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

作成したアニメーションを要素に適用します。ここでポイントなのは、animationプロパティにforwardsという値を指定することです。これにより、アニメーションが終了した時点で最後のキーフレームのスタイルが維持されます。

.element {
  animation: exampleAnimation 2s forwards;
}

もしくは、JavaScriptを使用してアニメーションを制御する方法もあります。以下の例では、animationendイベントが発生した時に、要素のスタイルを最終の状態に設定しています。

var element = document.querySelector('.element');

element.addEventListener('animationend', function() {
  element.style.opacity = 1;
});

以上で、CSSアニメーションを最後の状態で止める方法についての基本が分かりました。適用したいケースに合わせて、CSSだけで実現するか、JavaScriptと組み合わせて制御するか選択しましょう。動きのあるウェブデザインをより洗練されたものにするために、ぜひこれらのテクニックを活用してみてください！