CSS

【transition-property/transition-duration】トランジションの基本

みいと

transition-property、transition-durationで簡単なアニメーションを作成する

トランジションは、ある状態から別の状態への変化をなめらかに表現することができます。

transition-propertyプロパティとtransition-durationプロパティを使用すると、簡単なトランジションを設定することができます。

transition-propertyプロパティ

transition-propertyプロパティを使用すると、どのプロパティが変化したときにトランジションを実行するのかを設定できます。

transition-propertyプロパティには、下記の値を設定できます。

プロパティ プロパティ名を指定します。カンマ区切りで複数指定できます。
all 適用可能なすべてのプロパティに、トランジションが適用されます。
none トランジションを適用しないようにします。

transition-durationプロパティ

transition-durationプロパティを使用すると、どれくらいの時間をかけて変化させるかを設定できます。

transition-durationプロパティには、下記の単位の時間を指定できます。

s
ms ミリ秒(1/1000秒)

transition-property/transition-durationの使用例

#sample {
         width: 150px;
         height: 150px;
         background-color: red;
         transition-property: background-color;
         transition-duration: 1s;
}
#sample:hover {
         background-color: blue;
}

下記の四角にマウスカーソルを乗せると、背景色が変化します。

sample

この設定ではtransition-propertyで、background-colorをトランジションの対象にしています。

そして、transition-durationで1s(1秒間)を指定しているので、background-colorの値を1秒間かけて変化させる処理になります。

もともとの色がred、hoverの時にblueが指定されているので、マウスカーソルが乗ると背景色が1秒間かけて、赤から青に変化します。

トランジションの基本のまとめ

今回はtransition-propertyプロパティと、transition-durationプロパティを使ったアニメーションを作ってみました。

この程度のアニメーションであれば、比較的簡単にWEBサイトに取り入れることができそうです。

まとめ

  • トランジションとは状態の変化を滑らかに表現すること
  • transition-propertyは、どのプロパティが変化したときにトランジションを実行するのかを設定できる
  • transition-durationは、どれくらいの時間をかけて変化させるかを設定できる

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました