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` 属性は、主要なブラウザで広くサポートされています。
| ブラウザ | バージョン |
|---|---|
| Chrome | 43+ |
| Firefox | 16+ |
| Safari | 9+ |
| Edge | 12+ |
| Opera | 30+ |
詳細なブラウザ対応状況については、Can I use を参照してください。
まとめ
この記事では、`animation-play-state` 属性の基礎から応用までを解説しました。この属性を活用することで、CSSアニメーションをより柔軟に制御し、表現力豊かなWebページを作成することができます。ぜひ、`animation-play-state` 属性を活用してみてください。
参考資料
関連する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` に設定する必要があります。