CSSアニメーション(transition・transform・animation/@keyflame)をコンプリート!

CSSアニメーション CSS

こんにちは。トミーです。

CSSアニメーションには大きく分けて下記の3つがあります。

  • transition
  • transform
  • animation/@keyflame

この3つをコンプリートすれば、いろいろな動きをCSSでつけることができるので、ぜひマスターしましょう!

transitionについて

transitionとは直訳すると「変化」と言う意味です。
変化するまでの時間を指定するプロパティになります。

transition-property

変化を適用させたいプロパティを指定するプロパティです。
初期値は「all」になります。この場合、transitionが適応できるプロパティを全て指定できます。

「backgroud-color」のみを対象にしたい場合は下記のように記述します。
例) transition-property:background-color

transition-duration

変化の開始から終了までの時間を指定するプロパティです。
時間の単位は秒(s)またはミリ秒(ms)で指定できます。
初期値は「0s」になります。この場合、変化はしません。

開始から終了まで3秒間かけて変化させるには下記のように記述します。
例)transition-duration:3s

transition-delay

変化が開始するまでの遅延時間を指定するプロパティです。
時間の単位は秒(s)またはミリ秒(ms)で指定できます。
初期値は「0s」になります。この場合、遅延することなくすぐに開始されます。

開始から2秒遅延させて変化させるには下記のように記述します。
例)transition-delay:2s

transition-timing-function

変化の仕方を指定するプロパティです。
「変化の仕方」については、下記のようにさまざまな設定ができます。
オンマウス(スマホの方はタップ)で動きの違いを見比べてみてください。

ショートハンドプロパティ

全てまとめて表示することもできます。

図:transitionプロパティ

 transformについて

transformとは直訳すると「変形」と言う意味です。
CSS3から追加され、要素に対して変形を加えることができるプロパティになります。
変形には「移動」「回転」「伸縮」「傾斜」があり、順番に説明していきます。

transformには2DXY方向)と3DXYZ方向)の指定ができますが、今回は2Dのみについて解説していきます。

移動 transform:translate(0px);

要素の移動を指定するプロパティです。
「 transform:translate(数値); 」と記述し、値は「px」や「%」で指定します。

移動する方向としてはX軸方向、Y軸方向、XY軸方向があります。
実際にオンマウス(スマホの方はタップ)で動きの違いを見比べてみてください。

回転 transform:rotate(0deg);

要素の回転を指定するプロパティです。
transform:rotate(数値);」と記述し、値は角度を表す「deg」で指定します。(90deg=90度)

正数は時計回り、負数は反時計回りに回転します。
また、X軸方向、Y軸方向への回転もあります。
実際にオンマウス(スマホの方はタップ)で動きの違いを見比べてみてください。

伸縮 transform:scale(0);

要素の伸縮を指定するプロパティです。
transform:scale(数値);」と記述し、値は「数値のみ」で指定します。
1を基準に伸縮する比率を指定できます。

伸縮する方向としてはX軸方向、Y軸方向、XY軸方向があります。
実際にオンマウス(スマホの方はタップ)で動きの違いを見比べてみてください。

傾斜 transform: skew(0deg);

要素の傾斜を指定するプロパティです。
transform: skew(数値);」と記述し、値は角度を表す「deg」で指定します。(90deg=90度)

傾斜する方向としてはX軸方向、Y軸方向、XY軸方向があります。
実際にオンマウス(スマホの方はタップ)で動きの違いを見比べてみてください。

ショートハンドプロパティ

全てまとめて表示することもできます。
「プロパティ(値)」を半角スペースでつないで記述します。図:transitionショートハンドプロパティ

@keyframesについて

@keyframe設定方法

@keyframe設定方法

@keyframes」とは、アニメーションの開始から終了までの動きを制御する規則になります。

  • from(アニメーションの開始)→ to(アニメーションの終了)」で指定する方法
  • 0%(アニメーションの開始)→ 100%(アニメーションの終了)」で指定する方法

指定方法については、上記2点があります。
開始と終了を指定するのであればどちらを使用しても問題ないのですが、「0→100%」は「25%」や「50%」など細かく数値を指定することができるため、「%」での指定をオススメします!

animationについて

animation」とは、先ほど説明した「@keyframes」を適用させる際に使用します。
CSS3から追加され、下記の8つのプロパティがあります。
transition」と同様の機能もありますが、より細かい動きを実装することが可能です。

animation-name

アニメーションの名前を指定するプロパティ。
先ほどの「@keyframes」でつけた「任意の名前」を指定します。
どのアニメーションを適用させるか指定のみになりますので、アニメーションはされません。

animation-duration

アニメーションの開始から終了までの時間を指定するプロパティ。
時間の単位は秒(s)またはミリ秒(ms)で指定できます。
初期値は「0s」になります。

animation-timing-function

アニメーションの変化の仕方を指定するプロパティ。
初期値は「ease」になります。

animation-delay

アニメーションが開始するまでの遅延時間を指定するプロパティ。
時間の単位は秒(s)またはミリ秒(ms)で指定できます。
初期値は「0s」になります。
※下記がアニメーションされない場合は、下方にあります「Rerun」を押してください。

animation-iteration-count

アニメーションの繰り返しを指定するプロパティ。
初期値は「1」になります。
基本は値に「数値」を指定しますが、無限に繰り返す場合は値に「infinite」を指定します。
※下記がアニメーションされない場合は、下方にあります「Rerun」を押してください。

animation-direction

アニメーションの再生方向を指定するプロパティ。
再生方向については下記の4種類あります。
初期値は「normal」になります。

animation-fill-mode

アニメーションの開始前、終了後のスタイルを指定するプロパティ。
スタイルについては下記の4種類あります。
初期値は「none」になります。
※下記がアニメーションされない場合は、下方にあります「Rerun」を押してください。

animation-play-state

アニメーションの再生・停止を指定するプロパティ。
再生の「running」と、停止の「paused」があります。
初期値は「running」になります。

ショートハンドプロパティ

全てまとめて表示することもできます。
「プロパティの値」を半角スペースでつないで記述します。

図:animationショートハンドプロパティ

まとめ

「CSSアニメーション」と一言で表されていますが、多くの種類があることに改めて驚きました。
数が多いということは、それだけ自由度が高いということです。
いろいろ組み合わせて、あらゆるアニメーションを実装してみてください。

ただ、動きをつけすぎたり、必要のない動きをつけてしまったりなど、誤った使い方をしないように心がけていきましょう。

タイトルとURLをコピーしました