【box-shadow】ボックスに影をつける
みいと
おじさんのWEBデザイン学習まとめ
トランジションは、ある状態から別の状態への変化をなめらかに表現することができます。
transition-propertyプロパティとtransition-durationプロパティを使用すると、簡単なトランジションを設定することができます。
transition-propertyプロパティを使用すると、どのプロパティが変化したときにトランジションを実行するのかを設定できます。
transition-propertyプロパティには、下記の値を設定できます。
プロパティ | プロパティ名を指定します。カンマ区切りで複数指定できます。 |
---|---|
all | 適用可能なすべてのプロパティに、トランジションが適用されます。 |
none | トランジションを適用しないようにします。 |
transition-durationプロパティを使用すると、どれくらいの時間をかけて変化させるかを設定できます。
transition-durationプロパティには、下記の単位の時間を指定できます。
s | 秒 |
---|---|
ms | ミリ秒(1/1000秒) |
#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サイトに取り入れることができそうです。