transition:

transition:

transitionプロパティはプロパティの値を変化する時、一瞬で変化させないで段階的に変化させることができるプロパティです
キーワードで指定していきます
transition: 「変化させるプロパティ名」 「変化完成までの時間」 「変化の仕方」 「変化開始時間」;
変化させるプロパティ名についての指定できる値は以下の通り
all
(初期値)
すべてのプロパティの変化に対応
プロパティ名指定したプロパティの変化に対応
noneどのプロパティも変化しない
複数の変化するプロパティがあり、それぞれの変化の仕方を違うものにしていきたいなら、変化させるプロパティ名の指定は必須になります
複数プロパティを指定したい場合にはカンマ(,)を使うことで指定できます

変化完成までの時間の指定には時間のデータ型で指定します
0s
(初期値)
すぐに変化開始
任意の数値 + s または
任意の数値 + ms
sは秒を示し、msはミリ秒を示します
複数プロパティを指定したい場合にはカンマ(,)を使うことで指定できます

変化の仕方は三次ベジェ曲線関数やsteps()関数で指定しますが、キーワードで指定することもできます
ease
(初期値)
開始と終了付近がなめらかに
cublic-bezier(0.25,0.1,0.25,1)と同じ
linear直線的に変化
cublic-bezier(0,0,1,1)と同じ
ease-in変化スタート付近が緩やか
cublic-bezier(0.42,0,1,1)と同じ
ease-out変化終わり付近が緩やか
cublic-bezier(0,0,0.58,1)と同じ
ease-in-out変化スタートと終わり付近が緩やか
cublic-bezier(0.42,0,0.58,1)と同じ
cubic-bezier()三次ベジェ曲線関数
cubic-bezier(X1,Y1,X2,Y2)のように指定
X1とX2は0以上1以下
step-start変化の開始の瞬間に終了の状態になる
step-end変化終了の時間まで開始の状態のままで、
変化終了の時間になると変化完了状態になる
steps()steps(「区切りの数(整数)」 「変化の仕方のキーワード」;)
区切りの数だけ分割されて一気に変化します(0→25→50 といった感じ)
変化の仕方のキーワードは以下の通り
  • start 変化開始時に、まず区切りが一つ進む
  • end 変化の終わりの時間に、最後の変化が起こるように進む
  • jump-both 変化開始時にまず区切りが一つ進み、
    変化の終わりの時間に、最後の変化が起こるように進む
  • jump-none 変化開始時や変化の終わりの時間に変化がおこらないようにする

変化開始時間は、いわゆるディレイ。変化する操作があったときにどれだけ遅らせるかを指定します
変化開始時間までの時間の指定には時間のデータ型で指定します
0s
(初期値)
すぐに変化開始
任意の数値 + s または
任意の数値 + ms
sは秒を示し、msはミリ秒を示します
/*↓p要素にマウスオーバーさせたときの変化例*/
p:hover{transition: 「変化させるプロパティ名」 「変化完成までの時間」 「変化の仕方」 「変化開始時間」; 
       「変化させるプロパティ名」:「変化内容」;
       }

                

目的別

外部スタイルシートを読み込む
スタイルシートを埋め込む
classを設定する
classやidにスタイルシートを適応させる
ユーザー環境によってスタイルを変更する
訪問済みリンク・未訪問リンクにスタイルを適用
マウスオーバーやアクティブ化した要素にスタイル適用
指定した要素n番目の要素にスタイルを適用
指定した要素のn番目の子要素にスタイルを適用
フォントを設定する
フォントサイズを設定する
フォントの太さを指定する
フォントスタイルを指定する
行の高さを指定する
文字の色を指定する
文章の揃え位置を指定する
文字に線を引く
文字に引かれた線の色を指定
文字に引かれた線のスタイルを指定
文字に引かれた線の太さを指定
文字に傍点をつけ形を指定する
文字の傍点の色を指定
文字に影を作る
表のキャプションの位置を指定
背景に色を付ける
背景に画像を設定する
背景画像の繰り返し方を指定
背景画像の水平垂直位置を指定
背景画像の表示サイズを指定
ページスクロール時の背景画像の表示方法を指定
背景画像の表示されるエリアを指定
背景画像の表示される基準位置を指定
枠線太さを指定する
枠線のスタイルを指定
枠線の色を指定
枠線の角丸を指定
枠線に画像を指定
ボックスの幅と高さを指定
ボックスのマージンを指定
ボックスのパディングを指定
ボックスの配置方法・配置位置を指定
ボックスの重なり順を指定
ボックスの回り込みを指定
ボックスの回り込みを解除
サイズが指定されているボックスに収まらないコンテンツの表示方法を指定
画像や動画の要素をボックスに合わせる方法を指定
ボックスの可視・不可視を指定
ボックスの影を設定
リストマーカーの種類を指定
リストマーカーの位置を指定
カーソルの形を設定
プロパティを段階的に変化させる
画像や文字を加工する