CSSアニメーションのチートシート

CSSアニメーションとは

JavascriptなしでHTML要素にアニメーションをつけることができるCSSの機能。
CSSアニメーションの活用例 |CodePen|

2022年現在、ほぼ全てのブラウザで使用可能。
Can I use animation

スクロールして画面に表示されたタイミングでアニメーションさせる、などのユーザの動きに合わせてタイミングをみてアニメーションを動かす場合はJavascriptが必須になってくるケースが多いが、画面に映っていない間もずっとアニメーションさせるならCSSアニメーションを使うのが主流。

基本の使い方

1. @keyframesで特定のアニメーションの動きを定義する

@keyframeの後にアニメーション名をつけ、{}のなかに0%の時の状態から100%の時の状態を定義する。
0%と100%が定義されていれば間の数値はお好みでOK.

@keyframes rotation {
  0% {
    transform: scale(.3);
  }

　50% {
    transform: scale(.6);
  }

  100% {
    transform: scale(1) rotate(180deg);
    background: blue;
  }
}

0%と100%は、fromとtoでも代用可能。以下は先ほどのものを別の書き方。

@keyframes rotation {
  from {
    transform: scale(.3);
  }

　50% {
    transform: scale(.6);
  }

  to {
    transform: scale(1) rotate(180deg);
    background: blue;
  }
}

2. animationでアニメーション名や開始までの時間、保持時間などをアニメーションをつけたいクラスに指定していく

.box {
    animation: rotation 2s ease 0s 1 alternate none running;
}

これだけ。簡単。
とはいえ、この指定していくプロパティがたくさんあってややこしいので、次にプロパティをまとめて紹介します。

animationプロパティの指定順

animation |MDN|

以下の値を半角スペース区切りで1行で指定できる。
(以下は見やすく改行してしまっているが、本来は1行で書く。)

animation: 
  animation-name (必須)
  animation-duration (必須)
  animation-timing-function 
  animation-delay
  animation-iteration-count (必須) 
  animation-direction 
  animation-fill-mode
  animation-play-state 

日本語で

animetion: 
  @keyframeで定義した名前 (必須)
　アニメーションに保持時間 (必須)
　アニメーションのつけ方(既存の機能名を使う)
　開始までかかる時間
　ループ回数。infiniteで無限 (必須)
　アニメーションの再生方向(既存の機能名を使う)

animationに指定できるプロパティ一覧

animation-name(必須)

noneか、@keyframeで定義した名前をここで書く。書かないと使えないので、これは必須。

animation-duration(必須)

アニメーションの保持時間。
書かないとデフォルトが0sなので、アニメーションが行われないことになるのでこれも必須。
必ず秒 (s) またはミリ秒 (ms) で書く。

animation-timing-function

書かないとデフォではeaseになる。そのままeaseにしておいていい場合は書かなくてもいい。

一般的には以下のどれかをよく使う。

ease

ゆっくり始まり、途中早くなって、またゆっくり終わる

ease-in

ゆっくり始まり、後半早くなる

ease-out

早く始まって、ゆっくり終わる。

ease-in-out

ゆっくり始まり、途中早くなって、ゆっくり終わる.
easeとの違いがわかりにくいが、こっちの方が緩急がついて早く感じる。

linear

同じ勢いで最後まで行く。速度と時間をグラフで表すと一次関数のグラフになる。緩急とかは全く付かない。

その他

他にcubic-bezierやstepsのようなeasing-functionもあるが、結構難しい。。ここでは割愛させていただきます。

ちなみにデベロッパーツールで、アニメーションを表示させると紫のアイコンが出てくる。
押すとアニメーションの違いを見ながら調節できるのですごく便利でオススメです。

animation-delay

アニメーションが開始するまでの待ち時間。
デフォは0sなので、指定していないとすぐ始まる設定になる。
秒 (s) またはミリ秒 (ms) のどちらかで指定。単位は必須だが、-の値も入れられる。

animation-iteration-count(事実上必須？)

アニメーション回数。初期値は1で、1回再生される。
infiniteだと無限ループ。

animation-direction

デフォはnormal.

逆再生のreverse, 他alternate, alternate-reverseもあるがあまり使わなさそう。

animation-fill-mode

アニメーションの後にどのような状態になっていてほしいか指定する。あまり使わなさそう。

animation-play-state

アニメーションを止めたり、走らせたりを制御。あまり使わなさそう。

animationのよく使う値の組合せ

animation: アニメーション名 保持時間　回数(infiniteとか);

@keyframeによく使うCSSプロパティまとめ

transform: transrateX(●px);

横に動かす時に使う。transrateYもあって、それは縦軸の移動。
pxや％で指定する。

transform: scale(●)

大きさを制御する。（）の中は数字を入れると●倍という意味になる。
ズームとか大きくするとかに使う。
()の中に2箇所カンマ区切りで数字を入れると、X軸とY軸の大きさを指定できる。
scale(2,1);ならx軸に2倍、Y軸に1倍に拡大するという意味。

opacity: ●;

不透明度。百分率を小数点で表示する。1が100%。
opacity: 0.1;なら10％の不透明度ということ。
フェードインみたいにふわっと表示させる時によく使う。

transform: skew(●);

しゃげさせる。捻る？その方法に引っ張る感じの効果を出せる。
単位はdegで、1つの数値ならx軸に歪める。カンマ区切りで2つ数値を入力したらx軸とy軸に歪めることができる。
プルンプルン効果を表現する時に使う。
イメージ的にx軸とy軸が同じ数値で使う気がする。