LoginSignup
19

【初心者向け】cssアニメーションの基本的な書き方とサンプル例

Last updated at Posted at 2023-11-20

はじめに

弊社サービス「モッピー」内にはキャラクターがいるので、アニメーションをつけることが多々あります。

例えばページ読み込んだ時のフェードイン

メインビジュアルの表示アニメーション メインビジュアルの表示アニメーション

脇の方でふわふわ動いたり

飛行機に乗ってふわふわ動くモッピーくん

ぽよよんとしたり

飛行機に乗ってふわふわ動くモッピーくん

ちょっとしたアニメーションでもあるとリッチで良きですからね:ok_hand:
弊社に転職してくるまでcss animationを書く場面がほぼなかったため、改めて書き方を学んだのでまとめます。

基本的な書き方

Step1:point_up:. keyframes に動きを書く

下からフェードインする動きを書いてみます。

@keyframes fade-in {
    0% {
		opacity: 0;
		transform: translateY(60px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

fade-in は任意の名前にしてもらってOKです。

動きの切り替えが0% 100%の2つで済むなら以下のようにfrom toでも書けます。
わかりやすい方でok

@keyframes fade-in {
    from {
		opacity: 0;
		transform: translateY(60px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

Step2:v:. 動かしたい要素に animation を設定する

animation で使うプロパティは以下になります。

プロパティ 設定できること 私的よく使うもの
animation-name @keyflameでつけた任意の名前を書くと紐づけられる 任意
animation-duration アニメーション1回の時間の長さ
animation-timing-function アニメーションの加速曲線・進め方 ease-in-out(加速減速)
linear(一定の速度)
animation-delay 読み込まれてから何秒後にアニメーションを開始するか
animation-iteration-count アニメーションを繰り返すか1回限りか infinite(繰り返す)
animation-fill-mode アニメーション実行後
キーフレームで指定したスタイルを適用するか否か
forwards(指定スタイルそのまま)
animation-direction アニメーション再生の向き alternate(0%→100%→0%で再生)

これらを使用して書いてみるとこうなります。

See the Pen Untitled by suzuki (@dcdakxpd-the-flexboxer) on CodePen.

動いて嬉しい:relaxed:
だけどこれだと書くこと多くて面倒:frowning2:
なのでanimationを使用しショートハンドで同じことを書きます。

ショートハンドで1行で指定する

先ほどと同じものをanimationで1行で書きました。
animation-iteration-count は初期値が 1 なので省略です。

フェードインする動き

See the Pen Untitled by suzuki (@dcdakxpd-the-flexboxer) on CodePen.


以下の順番で指定していくと、想定通りに動作します。
カンマなどで区切る必要はなく、プロパティ値を書いていけばOKです。
※ 全て書く必要はなく、省略も可能です。


📝 書く順番

  1. animation-name : アニメーション名
  2. animation-duration : 開始〜終わりにかける時間
  3. animation-timing-function : 動きの速度の指定
  4. animation-delay : 開始を遅らせる
  5. animation-iteration-count : 繰り返しの指定
  6. animation-direction : アニメの再生方向の指定
  7. animation-fill-mode : アニメ終了後のCSS

アニメーションを複数連続でつける

フェードインからの横揺れアニメーションなど、複数指定する場合はカンマで繋ぐことができます。
2つ目のアニメーションの適用タイミングをanimation-delay にて調整するのがポイントです。

See the Pen animation 複数ショートハンド by suzuki (@dcdakxpd-the-flexboxer) on CodePen.

よく使用している動きサンプル

バウンドする動き

See the Pen Untitled by suzuki (@dcdakxpd-the-flexboxer) on CodePen.


冒頭の飛行機に乗ってふわふわしている動き

See the Pen Untitled by suzuki (@dcdakxpd-the-flexboxer) on CodePen.


スタンプみたいな動き

See the Pen Untitled by suzuki (@dcdakxpd-the-flexboxer) on CodePen.


鼓動みたいな動き

See the Pen Untitled by suzuki (@dcdakxpd-the-flexboxer) on CodePen.


参考サイトは以下になります

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19