motion / duration
'600ms'
dramatic
Collection
-
'300ms'
long
Collection
-
'200ms'
medium
Collection
-
'120ms'
short
Collection
-
'60ms'
quick
Collection
-
motion / easing
'cubic-bezier(0.3, 0.75, 1, 0.95)'
exit
Collection
-
'cubic-bezier(0.3, 0.75, 0.34, 0.95)'
standard
Collection
-
'cubic-bezier(0, 0, 0.34, 0.95)'
entrance
Collection
-
motion / animation
keyframes` 0% { opacity: 0; } 100% { opacity: 1; } `
fadeIn
Collection
-
keyframes` from { opacity: 1; } to { opacity: 0; } `
fadeOut
Collection
-
keyframes` from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0px); } `
slideRightFade
Collection
-
keyframes` from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(2px); } `
slideDownFade
Collection
-
keyframes` from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } `
slideUpFade
Collection
-