no-image

アニメーション

animation-name/アニメの名前

アニメーション・キーフレームの名前。

結果

SAMPLE TEXT

解説

0~100%の時間の中で、変化をかけます。

animation-duration/遅れて再生

アニメを遅れて再生する。

結果

SAMPLE TEXT

解説

「animation-duration」は、アニメーション再生の時間です。
0%~100%の絶対時間を決めます。値は「10s」というようにします。sは秒です。

animation-timing-function/変化方法

アニメの変化方法。

結果

SAMPLE TEXT

解説

「animation-timing-function」は、速度の変化のパターンを指定できます。
「liner」は、一定の速度。
「ease」は、やや減速で始まり、終わる。
「ease-in」は、減速から始まる。
「ease-out」は、減速して終わる。
「ease-in-out」は、減速で始まり、終わる。

animation-iteration-count/速度の変化

アニメ速度の変化方法。

結果

SAMPLE TEXT

解説

「animation-iteration-count」は、アニメーションを繰り返し行うかを指定できます。
「数字」で回数を指定、「infinite」で、ループで再生されます。

animation-direction/逆から再生

アニメを逆から再生する。

結果

SAMPLE TEXT

解説

「animation-direction」は、アニメーションを逆から再生します。
「alternate」を指定します。

animation-delay/遅れて再生

アニメを遅れて再生する。

結果

SAMPLE TEXT

解説

「animation-delay」は、アニメーションを遅らせて再生します。
例題では、オンマウスの状態で「3s(3秒)」遅れて開始されるように指定しました。

animation/アニメの一括指定

アニメーションの一括指定。

結果

SAMPLE TEXT

解説

「animation」は、「animation-name」、「animation-duration」、「animation-timing-function」、「animation-interation-count」、「animation-direction」、「animation-delay」を一括指定できます