508
Help us understand the problem. What are the problem?

posted at

updated at

【CSS3】Transition(変化)関連のまとめ

はじめに

この記事は、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 円

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
508
Help us understand the problem. What are the problem?