CSS animation-play-state 属性详解：CSSアニメーションの再生と一時停止を制御する

この記事では、CSSアニメーションの再生と一時停止を制御できる `animation-play-state` 属性について解説します。構文、値、使用シーンを詳しく説明し、豊富なコード例を交えながら `animation-play-state` 属性の活用方法を分かりやすく解説します。

1. animation-play-state 属性とは？

`animation-play-state` 属性は、CSSアニメーションの再生状態を制御するためのプロパティです。CSSアニメーションモジュールの一部であり、アニメーションの実行状態を動的に変更することができます。

2. animation-play-state 属性の構文

`animation-play-state` 属性には、以下の2つの値を設定することができます。

• `running`：アニメーションは再生中、またはこれから再生されます。
• `paused`：アニメーションは一時停止します。

以下は、`animation-play-state` 属性を設定する簡単なコード例です。

<style>
.element {
  animation: myAnimation 2s linear infinite;
  animation-play-state: paused;
}

@keyframes myAnimation {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}
</style>

<div class="element"></div>
    

3. animation-play-state 属性の活用シーン

`animation-play-state` 属性は、以下のような場面で活用することができます。

3.1. マウスホバーによるアニメーションの再生制御

マウスホバー時にアニメーションを開始し、マウスアウト時にアニメーションを一時停止する例です。

<style>
.element {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  animation: myAnimation 2s linear infinite;
  animation-play-state: paused;
}

.element:hover {
  animation-play-state: running;
}

@keyframes myAnimation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>

<div class="element"></div>
    

3.2. JavaScriptによるアニメーションの再生制御

JavaScriptを使用して、動的にアニメーションを一時停止したり、再生したりする例です。

<style>
.element {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  animation: myAnimation 2s linear infinite;
  animation-play-state: paused;
}

@keyframes myAnimation {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}
</style>

<div class="element"></div>

<button id="toggle-animation">アニメーションの切り替え</button>

<script>
const element = document.querySelector('.element');
const toggleButton = document.getElementById('toggle-animation');

toggleButton.addEventListener('click', () => {
  if (element.style.animationPlayState === 'paused') {
    element.style.animationPlayState = 'running';
  } else {
    element.style.animationPlayState = 'paused';
  }
});
</script>
    

3.3. パラパラ漫画風アニメーションの実装

`animation-play-state: paused` とJavaScriptを組み合わせることで、パラパラ漫画のように1コマずつアニメーションを再生する例です。

<style>
.element {
  width: 100px;
  height: 100px;
  background-image: url("sprite.png");
  background-size: 1000px 100px;
  background-position: 0 0;
  animation: frameAnimation 1s steps(10) infinite;
  animation-play-state: paused;
}

@keyframes frameAnimation {
  to { background-position: -1000px 0; }
}
</style>

<div class="element"></div>

<button id="next-frame">次のコマ</button>

<script>
const element = document.querySelector('.element');
const nextFrameButton = document.getElementById('next-frame');
let currentFrame = 0;

nextFrameButton.addEventListener('click', () => {
  currentFrame = (currentFrame + 1) % 10; // 10コマのアニメーションを想定
  element.style.backgroundPosition = `-${currentFrame * 100}px 0`;
});
</script>
    

4. ブラウザ対応状況

`animation-play-state` 属性は、主要なブラウザで広くサポートされています。

詳細なブラウザ対応状況については、Can I use を参照してください。

まとめ

この記事では、`animation-play-state` 属性の基礎から応用までを解説しました。この属性を活用することで、CSSアニメーションをより柔軟に制御し、表現力豊かなWebページを作成することができます。ぜひ、`animation-play-state` 属性を活用してみてください。

参考資料

• animation-play-state - CSS | MDN
• CSS animation-play-state Property

関連するQ&A

Q1: `animation-play-state` 属性とJavaScriptの `pause()` メソッドの違いは何ですか？

`animation-play-state: paused` はアニメーションを一時停止しますが、JavaScriptの `pause()` メソッドはアニメーションを完全に停止します。一時停止した場合、アニメーションは停止した時点の状態を保持しますが、停止した場合、アニメーションは開始位置に戻ります。

Q2: `animation-play-state` 属性は、すべてのアニメーションプロパティで動作しますか？

はい、`animation-play-state` 属性は、`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction`、`animation-fill-mode` などのすべてのアニメーションプロパティと組み合わせて使用できます。

Q3: `animation-play-state` 属性を使用して、アニメーションを逆再生できますか？

いいえ、`animation-play-state` 属性を使用してアニメーションを逆再生することはできません。アニメーションを逆再生するには、`animation-direction` プロパティを `reverse` に設定する必要があります。