#はじめに
この記事は、HTMLとCSSの基礎知識がある方向けの内容です。
CSS3から変化するまでの時間などを指定できる、transition （トランジション）プロパティが追加されました。
ボタンにマウスカーソルを乗せたときに、色や大きさなどが変わる時間を設定するときに使われるプロパティです。
#transitionプロパティについて
transition（トランジション）は、直訳すると変化や移り変わりという意味です。
変化するまでの時間を設定するプロパティです。
transitionは、ショートハンドプロパティを含め5つのプロパティがあります。
ショートハンドプロパティのtransitionで一括て指定することも出来るし、それぞれのプロパティで個別に指定することもできます。
| No | プロパティ名 | 読み方 | 説明 |
|---|---|---|---|
| 01 | transition-duration | トランジション・デュレーション | 変化が始まって終わるまでの時間を指定します。 |
| 02 | transition-property | トランジション・プロパティ | 変化が適用されるCSSのプロパティを指定します。 |
| 03 | transition-timing-function | トランジション・タイミング・ファンクション | 変化の度合いを指定します。 |
| 04 | transition-delay | トランジション・ディレイ | 変化が始まる時間を指定します。 |
| 05 | transition | トランジション | 上記の4つのプロパティを一括で指定できる、ショートハンド・プロパティです。 |
それぞれプロパティを見ていきましょう。
続きは Zenn で閲覧できます。
今まで無料で公開しておりましたが、記事を有料化しました。
2021 年 7 月 19 日 300 円
※ 調べて記事にまとめるのに 100 時間前後を費やしています。
※ 知識を得ること以外に時間短縮にもなるので、300 円以上の価値はあると思います。
※ 最初に購入した方々が損をしないように、値上げすることはあっても、値下げはしません。
他の CSS 関連の記事も Zenn で購入できます。
下記の記事も調べて記事にまとめるのに 100 時間前後を費やしているので、300 円以上の価値はあると思います。
ご興味のある方は、是非ご覧ください。
2021 年 7 月 19 日 各 300 円