CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのanimation-play-stateプロパティの使い方を解説

CSS animation-play-stateプロパティとは

animation-play-stateプロパティは、CSSアニメーションを実行中（running）にするか、一時停止（paused）にするかを指定するためのプロパティです。このプロパティを使うことで、JavaScriptなどに頼らずCSSだけでアニメーションの再生・停止をコントロールできます。

指定できる値

  • running：アニメーションが実行中になります（初期値）。
  • paused：アニメーションが一時停止します。再度「running」に切り替えると、停止した位置から再開されます。

animation-play-stateの使用例

以下のコードでは、animation-play-state: paused; を指定しているため、ページを読み込んでもアニメーションは開始されず、一時停止状態のまま表示されます。実際にコードを実行して動作を確認してみてください。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
position: relative;
background: red;
animation-name: myanim;
animation-duration: 2s;
animation-play-state: paused;
}
@keyframes myanim {
from {left: 0px; background-color: green;}
to {left: 100px; background-color: blue;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

実用例：ホバー時にアニメーションを再生する

animation-play-stateは、マウスオーバーなどの操作と組み合わせると便利です。例えば、通常時は一時停止しておき、要素にカーソルを合わせたときだけアニメーションを再生するといった実装が可能です。

div {
animation-play-state: paused;
}
div:hover {
animation-play-state: running;
}

このように記述することで、ユーザーの操作に応じてアニメーションの動きを直感的に制御できます。

まとめ

  • animation-play-stateは、アニメーションの「実行中」「一時停止」を切り替えるプロパティ。
  • 値は running（実行中）と paused（一時停止）の2種類。
  • :hoverなどの擬似クラスと組み合わせることで、インタラクティブな演出が簡単に実現できる。
  1. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し

  2. CSSのpointer-eventsプロパティとは？使い方をコード例で解説

    pointer-eventsプロパティとは CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。 このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。 auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。 none：要素がポインターイベントに反応しなくなります