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

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

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

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

transition-propertyプロパティ

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

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

transition-durationプロパティ

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

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

transition-property/transition-durationの使用例

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

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

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

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

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

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

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

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

みいと

Contact

興味を持ったものをいろいろと勉強しています。