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

CSSのanimation-play-stateプロパティでアニメーションの再生・一時停止を制御する方法

CSSでアニメーションの実行・一時停止を切り替える

CSSでは、animation-play-stateプロパティを使用することで、アニメーションを実行中にするか一時停止するかを簡単に制御できます。JavaScriptを使わずにCSSだけでアニメーションの状態を管理できるため、ホバー時やクリック時にアニメーションを一時停止させたい場合などに便利です。

animation-play-stateプロパティの値

このプロパティには、主に以下の2つの値を指定できます。

  • running：アニメーションが実行中であることを示します（デフォルト値）。
  • paused：アニメーションが一時停止していることを示します。

一時停止したアニメーションは現在のフレームで静止し、再度runningに変更すると、その位置からアニメーションが再開されるのが特徴です。

サンプルコード：アニメーションを一時停止状態に設定する

以下のコードを実行すると、要素のアニメーションが一時停止状態で表示されます。animation-play-state: paused;の部分をrunningに書き換えると、アニメーションが動き出すことも確認してみてください。

<!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プロパティを使えば、CSSだけでアニメーションの再生と一時停止を柔軟に制御できます。疑似クラス（:hoverなど）と組み合わせれば、マウスオーバー時にアニメーションを一時停止するといったインタラクティブな演出も簡単に実現可能です。

  1. CSSのborder-colorプロパティで4つの境界線の色を個別に設定する方法

    CSSで4つの境界線の色を設定するには 要素の4つの境界線（上・右・下・左）それぞれに異なる色を指定したい場合は、border-colorプロパティを使用します。このプロパティには最大4つの値を半角スペースで区切って指定でき、色は上 → 右 → 下 → 左の順番（時計回り）で適用されます。 なお、border-colorを機能させるには、あらかじめborder-styleプロパティで境界線のスタイル（solid、dashed、dottedなど）を設定しておく必要があります。スタイルが未指定の場合、初期値が「none」となり、境界線自体が表示されない点に注意しましょう。 コード例 以下のコードで

  2. CSSのborder-left-widthプロパティで左境界線の幅を設定する方法

    CSSで要素の左側の境界線の幅を指定するには、border-left-widthプロパティを使用します。このプロパティを使うことで、左境界線だけの太さを個別に制御できます。なお、境界線の幅を正しく表示するには、あらかじめborder-styleプロパティで境界線のスタイル（solid、dashedなど）を設定しておく必要があります。スタイルが未指定の場合、初期値が「none」のため、幅を設定しても境界線は表示されませんので注意しましょう。使用できる値thin / medium / thick … 細い・普通・太いというキーワードで指定px、em などの長さの値 … 数値で正確に幅を指定（例：1