CSS アニメーション：最後の状態を維持する方法

2024-04-02

CSS アニメーションの最後の状態を維持する方法

この問題を解決するには、いくつかの方法があります。

animation-fill-mode プロパティは、アニメーションの終了後に要素がどのように表示されるかを制御します。

forwards: アニメーションの最後のフレームの状態を維持します。
both: アニメーションの開始または終了フレームの状態を維持します。

例：

.element {
  animation: my-animation 2s linear infinite;
  animation-fill-mode: forwards;
}

@keyframes my-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

このコードでは、element は 2 秒間、線形にフェードインするアニメーションになります。アニメーションが終了した後、element は完全に不透明な状態のまま維持されます。

@keyframes ルールで最後のフレームを明示的に指定することで、アニメーション終了後の状態を制御できます。

.element {
  animation: my-animation 2s linear infinite;
}

@keyframes my-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateX(100px);
  }
}

JavaScript を使って、アニメーション終了後に要素の状態をプログラムで変更することもできます。

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

element.addEventListener('animationend', () => {
  element.style.opacity = 1;
  element.style.transform = 'translateX(100px)';
});

element.animate({
  opacity: [0, 1],
  transform: ['translateX(0)', 'translateX(100px)'],
  duration: 2000,
  easing: 'linear',
  iterations: Infinity
});

これらの方法を組み合わせることで、CSS アニメーションの最後の状態を柔軟に制御することができます。

補足

animation-fill-mode プロパティは、すべてのブラウザでサポートされているわけではありません。古いブラウザでは、@keyframes ルールや JavaScript を使う必要があります。
アニメーションの最後の状態を維持すると、ページの読み込み速度が遅くなる可能性があります。パフォーマンスが気になる場合は、アニメーションの duration や iterations の値を調整する必要があります。

HTML

<div class="element">
  <h1>アニメーションサンプル</h1>
  <p>このテキストはアニメーションによって移動します</p>
</div>

CSS

.element {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  margin: 20px auto;
  text-align: center;
}

.element h1 {
  font-size: 18px;
  margin: 10px;
}

.element p {
  font-size: 16px;
  margin: 20px;
}

@keyframes my-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

.element.active {
  animation: my-animation 2s linear infinite;
  animation-fill-mode: forwards;
}

JavaScript

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

const button = document.querySelector('button');

button.addEventListener('click', () => {
  element.classList.toggle('active');
});

説明

animation-fill-mode: forwards; により、アニメーション終了後、element は 100px 右に移動したまま維持されます。
button をクリックすると、element に active クラスが追加または削除されます。active クラスが追加されると、アニメーションが開始されます。

実行

このコードを HTML ファイルに保存し、ブラウザで開くと、button をクリックするたびに element が 100px 右に移動するアニメーションが実行されます。アニメーションが終了した後、element は 100px 右に移動したまま維持されます。

このサンプルコードは基本的な例です。必要に応じて、コードを編集して、さまざまなアニメーションを作成することができます。

CSS アニメーションの最後の状態を維持する他の方法

animation-iteration-count プロパティは、アニメーションの繰り返し回数を制御します。このプロパティを 1 に設定することで、アニメーションが 1 回だけ実行され、最後の状態が維持されます。

.element {
  animation: my-animation 2s linear 1;
}

@keyframes my-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

transition プロパティは、要素のスタイルの変化をアニメーション化するのに使用できます。このプロパティを使って、アニメーション終了後の状態を維持することができます。

.element {
  opacity: 0;
  transition: opacity 2s linear;
}

.element:hover {
  opacity: 1;
}

このコードでは、element は最初は透明な状態です。element にマウスが触れると、2 秒間かけて線形に不透明になっていきます。マウスが離れた後も、element は不透明な状態のまま維持されます。

CSS 変数を使って、アニメーションの開始状態と終了状態を定義することができます。

:root {
  --start-opacity: 0;
  --end-opacity: 1;
}

.element {
  opacity: var(--start-opacity);
  animation: my-animation 2s linear infinite;
}

@keyframes my-animation {
  0% {
    opacity: var(--start-opacity);
  }
  100% {
    opacity: var(--end-opacity);
  }
}

.element:hover {
  --end-opacity: 0.5;
}