はじめに
弊社サービス「モッピー」内にはキャラクターがいるので、アニメーションをつけることが多々あります。
例えばページ読み込んだ時のフェードイン
脇の方でふわふわ動いたり
ぽよよんとしたり
ちょっとしたアニメーションでもあるとリッチで良きですからね
弊社に転職してくるまでcss animationを書く場面がほぼなかったため、改めて書き方を学んだのでまとめます。
基本的な書き方
Step1
. 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
. 動かしたい要素に 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.
動いて嬉しい
だけどこれだと書くこと多くて面倒
なのでanimationを使用しショートハンドで同じことを書きます。
ショートハンドで1行で指定する
先ほどと同じものをanimationで1行で書きました。
animation-iteration-count は初期値が 1 なので省略です。
フェードインする動き
See the Pen Untitled by suzuki (@dcdakxpd-the-flexboxer) on CodePen.
以下の順番で指定していくと、想定通りに動作します。
カンマなどで区切る必要はなく、プロパティ値を書いていけばOKです。
※ 全て書く必要はなく、省略も可能です。
📝 書く順番
-
animation-name: アニメーション名 -
animation-duration: 開始〜終わりにかける時間 -
animation-timing-function: 動きの速度の指定 -
animation-delay: 開始を遅らせる -
animation-iteration-count: 繰り返しの指定 -
animation-direction: アニメの再生方向の指定 -
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.
参考サイトは以下になります