Motion

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