【CSS】 transitionでアニメーションを作ろう

transitionプロパティを用いることで、Javascriptを使わずにCSSのみでアニメーションを作成できます。

アニメーションさせる

transitionプロパティに、アニメーションの対象プロパティ、アニメーション時間、遅延時間、種類を指定します。

See the Pen css transition by Totori (@souki202) on CodePen.

これは、transitionで指定したプロパティの値が変化した時 (例えばhover時に値が変わる) に、だんだん変わるという効果を生みます。

例えば、

p {
    color: #000;
    transition: color 300ms;
}

p:hover {
    color: #f00;
}

とすると、平時は文字色が#000になります。しかし、hover時はp:hoverの方がセレクタの優先順位が高いため、#f00が適用されるようになります。

つまり、hoverすると#000から#f00に切り替わります。この切り替わりのタイミングのアニメーションを行うのがtransitionです。

transitionを一括指定

transitionに、スペース区切りで並べます。基本的にはこれで一括設定します。個別で指定することはあまりありません。 (開く時と閉じる時でアニメーション時間を変える等という程度)

p {
    transition: margin-right 100ms; /* プロパティ名 時間 */
    transition: width 200ms 0.3s; /* プロパティ名 時間 遅延時間 */
    transition: height 300ms ease-in-out; /* プロパティ名 時間 種類 */
    transition: padding-left 300ms ease 1s; /* プロパティ名 時間 種類 遅延時間 */

    transition: color 1s, background-color 1s; /* 複数の対象はカンマ区切り */
}

transition-property

トランジションを適用するCSSプロパティを指定します。

See the Pen css transition-property by Totori (@souki202) on CodePen.

値にallを指定すると、すべてのプロパティに対して適用することができます。

transition-delay

See the Pen css transition-delay by Totori (@souki202) on CodePen.

transition-propertyの指定数と同じ数だけカンマ区切りで指定すると、対応するプロパティに個別の時間を設定できます。

.t2 {
  transition-property: width, color;
  transition-delay: 100ms, 1s; /* widthが100ms, colorが1s */
}

transition-timing-function

アニメーションの種類を指定します。

See the Pen css transition-timing-function by Totori (@souki202) on CodePen.

アニメーションは非常に多くの種類があります。

p {
    transition-timing-function: ease; /* 完了と終了がなめらか */
    transition-timing-function: ease-in; /* ゆっくり始まる */
    transition-timing-function: ease-out; /* ゆっくり終わる */
    transition-timing-function: ease-in-out; /* ゆっくり始まり, ゆっくり終わる */
    transition-timing-function: linear; /* 一定の速度 */
    transition-timing-function: step-start; /* アニメーション開始直後に変化 */
    transition-timing-function: step-end; /* アニメーション終了時に変化 */

    transition-timing-function: steps(4, jump-start); /* 開始時に最初のジャンプ */
    transition-timing-function: steps(10, jump-end); /* 終了時に最後のジャンプ (1回目のジャンプが遅れる) */
    transition-timing-function: steps(20, jump-none);/* startとendの中間のタイミングでジャンプ */
    transition-timing-function: steps(5, jump-both); /* 1回目が少し遅れ(jump-endと同じ), 最後が止まった状態で終わる(jump-start) */
    transition-timing-function: steps(6, start); /* jump-startと同じ */
    transition-timing-function: steps(8, end); /* jump-endと同じ */
    transition-timing-function: steps(6, step-start); /* jump-startと同じ */
    transition-timing-function: steps(8, step-end); /* jump-endと同じ */

    transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); /* ベジェ曲線で指定 */
}

transition-propertyの指定数と同じ数だけカンマ区切りで指定すると、対応するプロパティに個別の時間を設定できます。

.t2 {
  transition-property: width, color;
  transition-timing-function: steps(6, end), ease-in-out;/* widthがsteps(6, end), colorがease-in-out */
}

消えたはずなのに反応する?

例えば、このような現象が起きます。

See the Pen css transition bubbling by Totori (@souki202) on CodePen.

最初に、hover!に触れないようにしながらマウスをhover!の下に移動させても何も起こりません。

しかし、一度hover!に触れて出現させると、消えた後にhover!の下にマウスを持っていくと、何故か出現することがわかります。

これは、出現した部分の子要素のアニメーションが完了していないために、親要素が反応するまま残っていることが原因です。

これを防ぐには、出現する要素の子要素のアニメーションでtransition-propertyにallは使わず、普通のプロパティ名を指定することで解決します。

See the Pen css transition bubbling 2 by Totori (@souki202) on CodePen.

まとめ

近年のWebサイトでは必ずと行ってよいほどアニメーションが利用されます。昔はJavascriptでアニメーションさせることが主でしたが、現在は可能な範囲でCSSで行うことが主流です。

アニメーション時間や種類をうまく設定して, ユーザが使いやすいアニメーションを心がけましょう!

keyframeを用いた高度なアニメーションは、下の記事にあります。

【CSS】 animationとkeyframeの種類

CSSでは、transition以外にもkeyframeを用いた複雑なアニメーションを作成できます。どの時間帯にどのような状態なのかを細かく指定…