HomeMotion & Animation
Preview
css
up
down
left
right
Code
css
@keyframes slideUp    { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes slideDown  { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes slideRight { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes slideLeft  { from { transform: translateX(100%); } to { transform: translateX(0); } }

.slide-up    { animation: slideUp    0.3s var(--ease-out); }
.slide-down  { animation: slideDown  0.3s var(--ease-out); }
.slide-right { animation: slideRight 0.3s var(--ease-out); }
.slide-left  { animation: slideLeft  0.3s var(--ease-out); }
Related Blocks
css
Easing Functions
Bezier values for ease-in, ease-out, and spring.
css
Fade In/Out
Opacity transition animations with stagger.
css
Loading Spinner
3 different loading animations.