Pour illustrer le style transition-timing-function: nous avon fait un exercice.
linear
ease
ease-in
ease-out
ease-in-out
steps(3,start)
steps(3,end)
transition-timing-function: cubic-bezier(0.505, -0.560, 0.495, 1.465)
transition-timing-function:cubic-bezier(0.000, 3, 1.000, -1)
transition-timing-function: cubic-bezier(1.000, 0.960, 0.000, 0.615)
transition-timing-function: cubic-bezier(1.000, 0.010, 0.000, 1.000)
transition-timing-function: cubic-bezier(0.000, 1.020, 0.995, 1.440)
Pour générer une transition en une courbe de bezier nous avons le site:
https://matthewlein.com/tools/ceaser
Attention à l’ordre des transformation. Les axes pivotes en même temps l’objet.
transform:translate(100px,0) rotate(45deg)
transform:rotate(45deg) translate(100px,0)
