コピペでもOK！初心者向けCSSアニメーションのtransition編【Lesson2】
CSSアニメーションはtransitionとanimationの2種類があります。前回は簡単にCSSアニメーションについて大まかにご紹介しましたが、今回はtransitionについて詳しく解説しようと思います。
transitionだけでも簡単にアニメーションができます。transitionの構造を詳しく見ていきましょう。
① transitionにできること
transitionは、簡単に使えるので初心者でも実装できます。
transitionは始まりと終わりの間の動作を指定することができ、ボタンのマウスオーバー時に使われることが多いです。
細かい設定はできませんが、これを使うだけでも静的ページに動きをつけることができます。
常に動かすというよりは、何かアクションをするときにアクセントをつける認識でOKです。
② transitionの構造を理解する
大きく５種類に分類されますが、全て覚えなくても問題ないです。基本的にはtransitionにまとめて書きます。
- ★ transition
- ☆ transition-property
- ☆ transition-duration
- ☆ transition-timing-function
- ☆ transition-delay
★マークのtransisionより下の☆マーク4つは、transitionを分けて書く時に使うものです。
普段はtranditionだけを使いますが、複数のアニメーションを作りたい時や個別に指定したい時に☆マークの4つを使います。後から修正する時にも簡単に対応できます。
上図で見てわかるように、
transition-property、transition-duration、transition-timing-function、transition-delay
の順番で半角スペースを空けて並べてかきます。いらない指定は記入はしません。
それぞれのプロパティを細かく見て行きましょう。
transition-property
propertyと言うようにアニメーションをどう指定するかを設定します。全体の動きをどうするか、動かすのかどうかを指定します。特になければall（初期値）でいいです。
| プロパティ | 働き方 |
|---|---|
| all | すべてのプロパティでトランジションが有効（初期値） |
| none | すべてのプロパティでトランジションが無効 |
| (custom)値 | トランジションを適用する任意の文字列 |
(custom)値で複数指定する場合はカンマで区切ります。好きな文字列で指定することができ、複雑なアニメーションを作る時に管理がしやすくなります。
transition-duration
durationはアニメーションの間隔（時間）を設定します。
| 単位 | 長さ |
|---|---|
| ms | ミリセカンド。10ms=1秒。 |
| s | セカンド。1s=1秒。 |
transition-timing-function
timing-functionはアニメーションを動かすタイミングを設定します。
| プロパティ | 働き方 |
|---|---|
| ease | （初期値） |
| linear | 一定の速さ |
| ease-in | 始めをゆっくり |
| ease-out | 終わりをゆっくり |
| ease-in-out | 始めと終わりをゆっくり |
| step-start | 始まり時を終わりの時点に |
| step-end | 終わり時を終わりの時点に |
他にも複雑なプロパテがありますが、慣れるまではこれだけで作ることをおすすめします。
特に何も指定がなければlinear(初期値)でいいです。
transition-delay
delaynはアニメーションの遅れる時間を設定します。
このプロパティはtransition-durationと同じようにs,msで指定します。
普段は使うことが少ないですが、これがあるだけで特殊なアニメーションを作ることができます。2段階の変化も簡単に作ることができます。
③ transitionでアニメーションを作る
サンプルを見ながら実際にアニメーションを作って行きましょう。
ボタンのサイズと色を変化させるアニメーションです。transition-duration、transition-timing-functionだけで作れます。グラデにするのもオススメです。
See the Pen
by loa (@hana4525)
on CodePen.
ボタンのサイズと色を二段階で変化させるアニメーションです。少し複雑ですが、一つ一つのプロパティは単純です。transition-delayを使うことで動きを二段階で変化させています。
See the Pen
by loa (@hana4525)
on CodePen.
④ まとめ
transitionを覚えておくだけで、ちょっとしたアニメーションに対応できるので便利です。提案するときに少しアニメーションをつけるだけで、印象よく思っていただけることも多いです。
次回解説するanimationを理解する上でもtrasitionの構造はすごく役立つので、この記事を何度も読み返して実装してみてください。
最後までご覧いただきありがとうございました。