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)

押したら動きます

transitionのショートハンド

ex) transition: 3s all ease 0s

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

• transition-duration: 3s
• transition-property: all
• transition-timing-function: ease
• transition-delay: 0s