1. HOME
  2. html_css
  3. transitionを使った動きの基礎についてのまとめ

transitionを使った動きの基礎についてのまとめ

transitionを使った動きの基礎についてのまとめ

transitionのプロパティの種類

プロパティ名 説明
transition-duration 変化の開始から終了までの時間を指定する
transition-property 変化させたいCSSのプロパティを指定する
transition-timing-function 変化の度合いを指定する
transition-delay 変化を開始するまでの時間を指定する

transition-timing-functionの動きについて

説明 cubic-bezierでの値
ease 開始時と終了時は緩やかに変化する cubic-bezier
(0.25,0.1,0.25,1.0)
linear 開始時と終了時まで一定に変化する cubic-bezier
(0.0,0.0,1.0,1.0)
ease-in 開始時は緩やかに変化、終了に近づくと早く変化する cubic-bezier
(0.42,0.0,1.0,1.0)
ease-out 開始時は早く変化、終了時は緩やかに変化する cubic-bezier
(0.0,0.0,0.58,1.0)
ease-in-out 開始時と終了時は、かなり緩やかに変化する cubic-bezier
(0.42,0.0,0.58,1.0)
ease
linear
ease-in
ease-out
ease-in-out

transitionのショートハンド

ex) transition: 3s all ease 0s

これをショートハンドを使わずに書いてみると、、、

  • transition-duration: 3s
  • transition-property: all
  • transition-timing-function: ease
  • transition-delay: 0s
他のカテゴリーの記事をみる