System

コピペでもOK!初心者向けCSSアニメーションのtransition編【Lesson2】

CSSアニメーションはtransitionとanimationの2種類があります。前回は簡単にCSSアニメーションについて大まかにご紹介しましたが、今回はtransitionについて詳しく解説しようと思います。

transitionだけでも簡単にアニメーションができます。transitionの構造を詳しく見ていきましょう。

① transitionにできること

transitionは、簡単に使えるので初心者でも実装できます。
transitionは始まりと終わりの間の動作を指定することができ、ボタンのマウスオーバー時に使われることが多いです。

細かい設定はできませんが、これを使うだけでも静的ページに動きをつけることができます。
常に動かすというよりは、何かアクションをするときにアクセントをつける認識でOKです。

② transitionの構造を理解する

大きく5種類に分類されますが、全て覚えなくても問題ないです。基本的にはtransitionにまとめて書きます。

  • ★ transition
  • ☆ transition-property
  • ☆ transition-duration
  • ☆ transition-timing-function
  • ☆ transition-delay

★マークのtransisionより下の☆マーク4つは、transitionを分けて書く時に使うものです。
普段はtranditionだけを使いますが、複数のアニメーションを作りたい時や個別に指定したい時に☆マークの4つを使います。後から修正する時にも簡単に対応できます。

transition

上図で見てわかるように、
transition-propertytransition-durationtransition-timing-functiontransition-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-durationtransition-timing-functionだけで作れます。グラデにするのもオススメです。

See the Pen
by loa (@hana4525)
on CodePen.

ボタンのサイズと色を二段階で変化させるアニメーションです。少し複雑ですが、一つ一つのプロパティは単純です。transition-delayを使うことで動きを二段階で変化させています。

See the Pen
by loa (@hana4525)
on CodePen.

④ まとめ

transitionを覚えておくだけで、ちょっとしたアニメーションに対応できるので便利です。提案するときに少しアニメーションをつけるだけで、印象よく思っていただけることも多いです。

次回解説するanimationを理解する上でもtrasitionの構造はすごく役立つので、この記事を何度も読み返して実装してみてください。

最後までご覧いただきありがとうございました。