森のプログラミング練習ブログ

htmlやcssの練習したコードを投稿するブログです。

CSSの一括指定「transition」

参考サイト

CSSのプロパティのショートハンド11個まとめ!イラストを使ったチートシートで解説 | webliker

自分なりにまとめてみました。

 ---------------------------------------

transition

f:id:morijuntan:20201125151525p:plain

1.transition-property:アニメーションしたいプロパティ

2.transition-duration:開始から終わりまでの時間

3.transition-timing-function:動きの速度の指定

4.trandtion-delay:アニメーションの回石を遅らせる

 

読み:duration=デュレーション(持続、存続)

  :function=ファンクション(機能、動き、作用)

  :delay=ディレイ(遅らせる、延ばす)

  :transition=トランセッション(移行、変化)

ショートハンド

transition:

例:.el{transition:all 1s ease-in 3s;}