Share
blog
ブログ
2024-03-11
コーディング業務
デザイナーが覚えておきたい、アニメーション指示が出しやすくなるCSS3選
Writer
アライブテックチーム
<目次>
</目次>
こんにちは。
アライブテックチームの村松です。
WEBデザイナーの皆様、アニメーションの指示って難しくないですか？
「ふわっとさせたい」とか「シュッと入ってきて欲しい」、「シャキーン！って感じで！」など、
擬態語でイメージを伝えてみても、なかなかイメージ通りに仕上がって来ない！
あるあるではないかなと思います。
そこで今回は、
デザイナーさんがコーディング指示を出すのに理解しておくと良いCSSアニメーションのプロパティを紹介・解説していきます！
▪︎合わせて読みたい関連記事
コーディング指示に活用できるCSSアニメーションプロパティ
transition-*
「トランジション」プロパティは、要素に変化を与えるアニメーションを設定するプロパティです。
transition-duration
アニメーションの速度を制御するプロパティです。
初期値は0sで、「1s」では「1秒」、「0.5s」と記述すると「0.5秒」と、アニメーション変化する間の秒数を指定できます。
「⚪︎秒くらいかけてアニメーションを変化させたい」時には「transition-durationは⚪︎秒で」などと指示を出すとニュアンスが伝わりやすいでしょう。
transition-timing-function
アニメーションの変化速度を制御するプロパティです。
初期値は「ease」で、基本的に「ease-in」、「ease-out」、「ease-in-out」など5種類のキーワード値で指定することが一般的かと思います。
深く掘り下げると「ベジエ曲線ガー」とか「イージング関数ガー」とかありますが、今回は比較的容易に認識できるこの5種類に絞ってご紹介します。
- ease…開始と同時に加速し、終了向かって緩やかに減速させる
- linear…開始から終了まで一定の速度で変化させる
- ease-in…緩やかに開始し、終了に向かって加速させる
- ease-out…開始から終了に向かって緩やかに減速させる
- ease-in-out…開始から緩やかに加速し、と終了付近に向かって緩やかに減速させる
参考:「 CSS3のtransition-timing-functionの動きをサンプルで理解しよう 」
こちらの記事は視覚的にわかりやすく動きの違いを確認できました。
「色変化アニメーションのイメージはease-in-outで」などと添えると伝わりやすいかと思います。
transition-delay
アニメーションを開始するまでの時間を設定するプロパティです。
transition-durationと同様に、「⚪︎s」のように秒数を値に指定します。初期値は「0s」。
例えば「1s」と指定すれば、1秒遅れてアニメーションが開始します。
その他、「transition-property」「transition-behavior」などのプロパティがありますが、
アニメーション指示に活用できるのは以上になると思いますのでここでは割愛させていただきます。
transition
コーディング指示とは話が変わりますが、
上記のようなtransition関連のプロパティを一括で指定できるプロパティが『transition』です。
一括で指定できることを理解していると指示が楽なこともあるかと思います。
それぞれの値を半角スペースで区切って記述します。
指定の順番には決まりはないですが、「transition-duration」と「transition-delay」を両方記述する際は、
「transition-duration」を先に、「transition-delay」を後に記述しましょう。
@keyframes
キーフレームアニメーションを設定し詳細なアニメーション表現を可能にすることができます。
0〜100%、to〜fromなどのプロパティを使い、アニメーションの変化を設定します。
使用例① 0〜100%
下記は文字色を、開始時点は赤、中間地点で黄、終了時に青に変化させる指定です。
@keyframes example {
0% {
color: red;
}
50% {
color: yellow;
}
100% {
color: blue;
}
}
使用例② from〜to
下記は文字サイズを、12pxから20pxに変化させる指定です。
@keyframes example{
from{
font-size: 12px;
}
to {
font-size: 20px;
}
}
例えば、赤→青→黄とアニメーションで背景色を変化させたい場合、
「@keyframesでは0%がbackground:red、50%がblue、100%でyellow」
などのように伝えると理解してもらいやすいかもしれません。
animation-*
「アニメーション」プロパティは@keyframesとセットで用い、
@keyframesで設定したキーフレームアニメーションを適用させたい要素に記述し、
キーフレームアニメーションを制御するプロパティです。
animation-duration
キーフレームアニメーションが完了するまでの時間を設定します。
「animation-delay」と同様に、「⚪︎s」など秒数を値に指定します。
例えば、2秒かけてアニメーションさせたい場合は「animation-duration : 2s;」のように記述します。
animation-direction
キーフレームアニメーションを再生させる方向・状態を指定します。下記4つの値を指定します。
- normal…初期値。標準の方向で再生
- reverse…normalと逆方向で再生
- alternate…「normal」と「reverse」を繰り返し再生
- alternate-reverse…「reverse」「normal」とを繰り返し再生
animation-delay
キーフレームアニメーションの開始時間を設定します。
「⚪︎s」など、秒数で値を指定します。
例えば、2秒後に開始したい時は「animation-delay:2s;」のように記述します。
animation-fill-mode
キーフレームアニメーションの実行中、実行後のスタイルを設定します。下記4つの値を指定します。
- none…初期値。@keyframes内の記述とは無関係の状態
- forwards…アニメーション実行後のスタイルを保持
- backwards…アニメーション実行時のスタイルに戻る
- both…アニメーション実行時は「backwards」、実行後は「forwards」と同じスタイルが適用
animation-iteration-count
キーフレームアニメーションを実行する回数を指定します。
初期値は「1」。「5」を指定すれば5回実行、「infinite」を指定すれば無限に繰り返し実行します。
animation-timing-function
キーフレームアニメーションの変化速度を指定します。
transition-timing-functionと同様の値（主には「ease」「linear」「ease-in」「ease-out」「ease-in-out」）を指定します。
animation関連のプロパティはこの他にもありますが、
アニメーション指示に活用できるのは以上になると思いますので割愛させていただきます。
animation
animation-*の値を一括で指定できるプロパティです。
transitionと同様に、まとめて指定できることを理解できていると指示が楽なこともあるかと思います。
半角スペースで区切り順不同で記述できますが、
transitionと同様に、animation-durationを先に、animation-delayを後に記述しましょう。
まとめ
現代のWEBサイト制作では、アニメーションが当たり前にのように用いられています。
CSS以外でも、JavaScirptを用いるなどアニメーションを表現するには多種多様の方法があります。
些細な知識を持っているだけでも、チーム内のコミュニケーションは格段にスムーズになると私は思います。
ストレスなく少しでも円滑にプロジェクトが運べるよう、本記事をご活用いただければ幸いです。
Reactなどを使用した複雑なアニメーション表現を取り入れたい！
そんなときは、ぜひ一度アライブにご相談くださいませ！
▪︎あわせて読みたい関連記事
2024-09-14
2024-09-08
2024-09-04
2024-08-01
2024-05-17
2024-05-08
2024-03-19
2024-03-11
2023-10-25
2023-09-06
2023-02-27
2022-12-28
2022-12-20
2022-07-21
2022-06-15
2022-03-31
Recommended Blog
オススメのブログ
2024-09-04
2024-03-19