HomeMotion & Animation
Preview
css
ease-in
ease-out
spring
Code
css
:root {
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Usage */
.card { transition: transform 0.2s var(--ease-spring); }
.card:hover { transform: translateY(-4px); }
Related Blocks
css
Fade In/Out
Opacity transition animations with stagger.
css
Loading Spinner
3 different loading animations.
css
Scale & Bounce
Scale and bounce micro-interactions.