CSSアニメーション

:hover

疑似要素:hoverはアニメーションを指定する直接のプロパティではないですが、【マウスが乗ったタイミングでアニメーションを開始】といったように「起動するトリガー」としてよく使われます。

transitionの基本プロパティ

transition-property

アニメーションするプロパティを指定
例: ransition-property: background-color;

transition-duration

アニメーションを開始してから終わるまでの時間
例: ransition-duration: 3s;

transition-delay

アニメーションを開始するまでの待ち時間
例: transition-delay: 3s;

transition-timing-function

アニメーションの変化のパターン

transition-timing-functionで使用できる値

[書き方]

ease

開始時と終了時にはゆっくり変化（初期値）

ease-in

開始時はゆっくり変化し、終了時は早く変化

ease-out

開始時に早く、終了時にゆっくり変化

ease-in-out

easeよりさらに、開始時と終了時はゆっくり変化

linear

速度が変わることなく一定に変化

記述例

マウスオーバーしたとき1秒かけて帯を伸ばす

animationでの設定のポイント

• 【キーフレーム】と言われるタイムラインを設定することで、アニメーションの【動き】を設定する
• トリガー側にアニメーション指定をすべて書く
• 無限に動き続けるアニメーションが設定できる

animationの基本プロパティ

animation-name

適用させたい「キーフレーム名」を指定

例: animation-name: anime01;

animation-duration

アニメーションが開始してから終わるまでの時間(※ transitionと同じルール)

例: animation-duration: 2s;

animation-timing-function

アニメーションの変化のパターン(※ transitionと同じルール)

例: animation-timing-function: ease;

animation-delay

アニメーションを開始するまでの待ち時間(※ transitionと同じルール)

例: animation-delay: 0.4s;

animation-iteration-count

アニメーションを何回繰り返すか指定

例: animation-delay: 1;

無限に繰り返す場合: animation-delay: infinite;

animation-direction

アニメーションの再生方向を指定

animation-directionで使用できる値

[書き方]

normal

順方向に再生される（初期値）

reverse

逆方向に再生される

alternate

順方向と逆方向が交互に再生される

alternate-reverse

逆方向を始まりとし、順方向と逆方向が交互に再生される

animation-fill-mode

アニメーションが開始する前後の状態を指定

animation-fill-modeで使用できる値

[書き方]

none

前後の状態は指定されない（初期値）

forwards

再生後、アニメーション終了時のスタイルが適用されたままになる

backwards

animation-delayが指定されている時、待ち時間にアニメーション開始時のスタイルが適用される

both

forwardsとbackwardsの両方が適用される

@keyframes

animationプロパティはキーフレーム(@keyframes)の作成が必須です。キーフレームでタイムラインに沿った【動き】を指定します。

例えばこんな感じで、キーフレーム内のポイントはいくつでも設定できます。

記述例

左右に動き続けるcube

参考リンク

animationプロパティ解説ページ

状態変化系プロパティの種類

translate[移動]

※移動距離は下記のように記述します。

[書き方]

rotate [回転]

※角度はdegで記述します。

[書き方]

scale [拡大縮小]

※拡大縮小値は倍数で記述します。

[書き方]

記述例

cubeを無限に回転させる

transition

animation

状態変化系