CSSトランジションの説明

コンポーネントをアニメーション化する最も簡単な(そして最も簡単な)方法は、CSSトランジションを使用することです。この記事では、CSSトランジションがどのように機能するか、およびそれを使用してアニメーションを作成する方法を学習します。

遷移は、CSSプロパティがある値から別の値に一定期間にわたって変化するときに発生します。

次のtransitionプロパティを使用してCSSトランジションを作成できます。

.selector { transition: property duration transition-timing-function delay; }

transitionプロパティは、4つのCSSプロパティの省略形です、transition-propertytransition-durationtransition-timing-functiontransition-delay

.selector { transition-property: property; transition-duration: duration; transition-timing-function: timing-function; transition-delay: delay /* The transition property is the shorthand for the above four properties */ transition: property duration timing-function delay; }

transition-property移行するCSSプロパティを参照します。transition速記で必要です。

transition-duration遷移の期間を指します。移行をどのくらい継続しますか?この値は、s接尾辞(のような3s)を付けて秒単位で書き込まれます。transition速記でも必要です。

transition-timing-function移行が発生する方法を指します。これについては後で詳しく説明します。

transition-delay期間を開始する前に待機する時間を指します。この値は、s接尾辞(のような3s)を付けて秒単位で書き込まれます。transition-delay省略形ではオプションですtransition

遷移のトリガー

CSS遷移は:hover:focus(マウスが要素の上に移動したときにアクティブになる)、(ユーザーが要素にタブで移動したとき、またはユーザーが入力要素をクリックした:activeときにアクティブになる)、または(ユーザーが要素をクリックしたときにアクティブになる)などの疑似クラスを使用して直接トリガーできます。)。

/* creating transitions directly in CSS */ .button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button:hover { background-color: #1ce; }

クラスを追加または削除することで、JavaScriptを介してCSS遷移をトリガーすることもできます。

/* CSS */ .button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button.is-active { color: #1ce; } // JavaScript const button = document.querySelector('.button') button.addEventListener('click', _ => button.classList.toggle('is-active'))

遷移タイミング機能を理解する

transition-timing-function遷移が発生するか決定します。すべてのトランジションのlinearデフォルト値はです。これは、トランジションが終了するまでプロパティが均等に変更されることを意味します。

.selector { transition: transform 1s linear; /* OR */ transition-property: transform; transition-duration: 1s; transition-timing-function: linear; }

問題は、人生で直線的に動くものはほとんどないということです。それは実際のオブジェクトが動く方法ではありません。時々、私たちは加速します。時々、減速します。をtransition-timing-function使用すると、そのすべてをキャプチャできます。

オープンフィールドにテニスボールを投げる自分を想像してみてください。ボールは最高速度であなたの手を離れます。それが動くと、それはエネルギーを失い、減速し、最終的に停止します。これはと呼ばれease-outます。そのためのタイミング機能があります。

.selector { transition-timing-function: ease-out; }

今、あなたが車の中にいると想像してください。現在動いていません。車を動かすと、加速して最高速度に近づきます。これはと呼ばれease-inます。そのためのタイミング機能もあります。

.selector { transition-timing-function: ease-in; }

あなたが持っているのでease-inease-out、2一緒に組み合わせたタイミング機能もありますease-in-out。(ease-in-outトランジションが1秒より長く続かない限り、トランジションで使用しないことをお勧めします。1秒以内に出入りするものは何もありません。単に奇妙に見えます。)

.selector { transition-timing-function: ease-in-out; }

これまでに学習したタイミング機能のデモについては、このペンを参照してください。

最後に、上記の選択肢のいずれかが気に入らない場合は、を使用して独自のタイミング関数を作成できますcubic-bezier

キュービックベジェを使用して独自のタイミング関数を作成する

キュービックベジェは、遷移タイミング関数を決定する4つの値のセットです。次のようになります。

.selector { transition-timing-function: cubic-bezier(x1, y1, x2, y2); }

心配しないでx1y1,x2y2。自分で数値を書き込んでキュービックベジェ曲線を作成することは決してありません(数値の意味をすでに理解していて、タイミング関数を完全に調整している場合を除きます)。

ChromeとFirefoxの信頼できる開発者ツールの両方を利用して、曲線を作成できます。これを使用するtransition-timing-functionには、要素にaを追加し、devtoolsを開いて、タイミング関数をクリックします。

CodePenのZellLiew(@zellwk)によるペンCSS遷移タイミング関数を参照してください。

アニメーション用に独自のベジェ曲線を作成する方法について詳しく説明することは、今日の記事の範囲外です。興味がある場合は、StephenGreigによる「UnderstandingCSSTimingFunctions」で3次ベジェ曲線の詳細を確認できます。

2つ以上のプロパティの移行

You can transition two (or more) CSS properties by separating them with a comma in your transition or transition-property property.

You can do the same with duration, timing-functions and delays as well. If the values are the same, you only need to specify one of them.

.selector { transition: background-color 1s ease-out, color 1s ease-out; /* OR */ transition-property: background, color; transition-duration: 1s; transition-timing-function: ease-out; }

You may be tempted to transition every CSS property with all. Don’t ever do this. This is bad for performance. Always specify the property you’re trying to transition.

/* DON'T EVER DO THIS */ .selector { transition-property: all; } /* ALWAYS DO THIS */ .selector { transition-property: background-color, color, transform; }

Transitioning in vs transitioning out

Sometimes, you want the properties to transition in and out at differently. You want the duration, timing-function or delay to be different.

To do so, you write another set of transition- properties.

.button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button:hover { background-color: #1ce; transition-duration: 2s; }

When you write transition properties in the triggering (pseudo) class, the transition properties in the triggering class overwrites the original transition properties you’ve stated in the base class.

So, in the example above, when you hover on the button, the background color takes 2 seconds to change from #33ae74 to #1ce.

When you hover out from the button, the background color only takes 0.5s to change back to #1ce because the transition-duration of 2s no longer exists.

Wrapping up

CSS Transitions are the easiest way to perform animations. You can create transitions either with the transition shorthand or with transition- properties.

To create a transition, you overwrite a property in a class (or psuedo class), and you specify the property to transit in transition or transition-property.

Remember to change your transition-timing-function so your animation looks more real!

If you loved this article, you’ll love learn Learn JavaScript — a course that helps you learn to build real components from scratch with JavaScript.

(Oh, by the way, if you liked this article, I’d appreciate it if you could share it. )

Originally published at zellwk.com.