コピペでもOK！初心者向けCSSアニメーションのanimation編【Lesson3】
animationでできることとは？
CSSアニメーションにはtransitionとanimationの2種類がありましたね。
前回は「初心者向けCSSアニメーションのtransition編【Lesson2】」の記事でtransitionでできることについてご紹介しました。
今回はアニメーション初心者の方に向けて、animationについて詳しく解説しようと思います。
animationを使うことでさらに複雑なアニメーションを作ることができます！
では一緒にanimationの構造を詳しく見ていきましょう。
よく読まれている記事
animationにできること
animationは、アニメーションの時間経過を指定することができます。
tranditionよりもさらに細かく動作指定をすることができるため、上級者によく使われています。
複雑なアニメーションを作りたいときや、時間によって変化をさせたいときにanimationを使います。
プロパティの数も多く、組み合わせも様々なのでオリジナルのアニメーションを作ることができます。
animationの構造を理解する
animationのは、大きく9種類に分類されますが、全て覚えなくても大丈夫です。
基本的にはanimationにまとめて書きます。
- ★ animation
- ☆ animation-name
- ☆ animation-duration
- ☆ animation-timing-function
- ☆ animation-delay
- ☆ animation-iteration-count
- ☆ animation-direction
- ☆ animation-fill-mode
- ☆ animation-play-state
★マークのanimationより下の☆マーク8つは、animationを分けて書く時に使うものです。
普段はanimationだけを使いますが、複数のアニメーションを作りたい時や個別に指定したい時に☆マークの8つを使います。
また、キーフレームアニメーションを適用する場合には「@keyframes」で定義する必要があります。
ではそれぞれのプロパティの概要を詳しく見ていきましょう。
animation-name
アニメーションの名前を設定します。
自分がわかりやすい名前がオススメです。
これは必ず英語表記で書くようにしましょう。（アルファベットであればOKです）
animation-duration
アニメーション1回の間隔（時間）を設定します。
これはtransition-durationと同じようにmsやsの単位で指定します。
＠keyframeの0～100％の間のアニメーションの時間を示していて、書かない場合は0秒となります。
| 単位 | 長さ |
|---|---|
| ms | ミリセカンド。10ms=1秒。 |
| s | セカンド。1s=1秒。 |
animation-timing-function
アニメーションを動かすタイミングを設定します。
これもtransition-timing-functionと同じように指定します。
| プロパティ | 働き方 |
|---|---|
| ease | （初期値） |
| linear | 一定の速さ |
| ease-in | 始めをゆっくり |
| ease-out | 終わりをゆっくり |
| ease-in-out | 始めと終わりをゆっくり |
| step-start | 始まり時を終わりの時点に |
| step-end | 終わり時を終わりの時点に |
特に特殊な動きを指定しない場合はlinear(初期値)で大丈夫です。
animation-delay
アニメーションの遅れる時間を設定できます。
これもanimation-durationと同じようにs,msで指定します。
このプロパティを使うと時間差のあるアニメーションも作ることができます。
animation-iteration-count
アニメーションを繰り返す回数を設定します。
1回の時は1、10回の時は10、無限ループの時はinfiniteで指定します。
複数の指定を一括で記述するときはカンマで区切ります。
animation-direction
アニメーションを再生する進行方向を設定します。
| プロパティ | 働き方 |
|---|---|
| normal | （初期値） |
| reverse | 逆方向 |
| alternate | 初回は順方向でその後反転 |
| alternate-reverse | 初回は逆方向でその後反転 |
これはどの方向から始めるかを簡単に指定することができます。
使う頻度は少ないですが、覚えておくと便利です。
animation-fill-mode
アニメーションの開始前・実行後で指定したプロパティを適用するかを設定します。
| プロパティ | 働き方 |
|---|---|
| none | （初期値） |
| forwards | 実行後に適用 |
| backwards | 開始前に適用 |
| both | 前後どちらとも適用 |
forwardsは最後の状態を保ち、backwardsは開始地点の状態を保ちます。
これもそれほど使うものではないですがこういうプロパティもあります。
animation-play-state
アニメーションを再生か一時停止かを設定します。
| プロパティ | 働き方 |
|---|---|
| running | 再生中（初期値） |
| paused | 停止中 |
これはアニメーションを動かしたり止めたりするのに便利な機能です。
これらのプロパティを組み合わせて使うことで、たくさんの面白い動きを作ることが可能になりました。
animationでアニメーションを作る
では実際にanimationを使って一緒に実装してみましょう。
今回も初心者の方でもわかりやすいように、ボタンを使って解説していきます。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
これは@keyframeを使って横に伸びるようなアニメーションをループ再生させています。
簡単に解説すると、横にのびる動きをyurayuraという名前で定義して、それを2秒間隔で繰り返すアニメーションです。
animationでは「どのような動きをどのように動かすか」を組み合わせてアニメーションを作っていきます。
これだけでもちょっと面白い動きを作れそうですよね。
よく読まれている記事
まとめ
animationの構造もなんとなく理解いただけたでしょうか。
今回の記事でCSSアニメーションの基礎的な解説は終わりになります。
これまで解説したものを組み合わせていくことで、より複雑で高度なアニメーションを作ることができます。
WEBデザインやコーディングをする方にとっては、アニメーションが強い武器となりますので是非たくさんのアニメーションを積極的に取り入れていきましょう♪
このサイト内でもアニメーションのいろいろな使い方を紹介しているので、参考にしてみてください。
これから先もどんどん新しいCSSのオプションが追加されていくと思うので、その時はまた解説してみたいと思います。
最後までご覧いただきありがとうございました☆彡