【CSS】transitionの一括指定の記述メモ

transition記述するときまとめて書きたいけど順番どうだったっけ?どんな内容だったっけ?っていつも忘れるのでメモしておく。

一括指定の記述順番

transition: ①property ②duration ③delay ④timing-function;

transitionそれぞれの簡単な解説

①transition-property: プロパティ;

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

②transition-duration: 完了するまでの時間;

トランジションによるアニメーションが完了するまでの所要時間を秒数またはミリ秒数で指定。
既定値は 0s。

③transition-delay: 開始時間;

値が変更されたときにプロパティのトランジション効果が始まるまでの待ち時間を指定。

④transition-timing-function: 進行度;

transition-durationプロパティで指定した時間のトランジション進行度(速度とタイミング)を指定。
ease、linear、ease-in、ease-out、ease-in-outのいずれかのキーワード、または、 cubic-bezier関数で値を指定。
初期値はease。(easecubic-bezier(0.25, 0.1, 0.25, 1.0) を指定したのと同じ(開始と完了を滑らかにする))

ABOUT US

yukipan
Web制作会社で働いてます。パンダとかリラックマとか、まあるいものが好き。好奇心旺盛で、何にでも興味をもってしまう。とりあえずやってみてから取捨選択するのがモットー。今はグリーンカレーとチャイと株式投資がブーム。