【CSS】アニメーションを付けられる「transition」の意味、使い方

transitionについて学習します。

transitionとは

「transition」は、ページにCSSでアニメーションをつけることができます。

「transition-duration:3s」は、3秒かけて表示していくアニメーションになります。

種類	意味	初期値
transition-property	アニメーションの指定ができます	すべて
transition-duration	アニメーションが完了するまでの時間	0s
transition-timing-function	中間のアニメーションを指定（「ease-in」は最初は遅く、だんだん早く）	ease （トランジションの半ばまで変化量が増加、最後にはまた遅くなる）
transition-delay	効果が始まるまでの待ち時間	0s

一括指定の記述は下記の通りです。

div {
  transition: <property> <duration> <timing-function> <delay>;
}

①property
②duration
③timing-function
④delay

半角スペースを空けて記述します。

記述の順番に関しては任意のようですが、「duration」「delay」の順番で記述することは間違えないようにします。

記述を省略することも可能で、省略した場合はそれぞれの初期値が適用されます。

プロパティを無効にするには、「none」や「unset」を使用していきます。

「none」や「unset」は、「これだけ外したい」といった特定の要素だけ解除したい場合に使用します。

アニメーションを指定するCSSの中には、このほかに「animation」というものもあります。

主に単純な効果に適しており、Animationはより複雑な動きを表現する際に使用します。