HomeMotion & Animation
Preview
css
Progress65%
Progress40%
Progress80%
Code
css
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes bounceIn {
  0%   { transform: scale(0.3);  opacity: 0; }
  50%  { transform: scale(1.05); }
  70%  { transform: scale(0.9);  }
  100% { transform: scale(1);    opacity: 1; }
}

/* Button click */
.btn:active { transform: scale(0.96); }

/* Kart hover */
.card { transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1); }
.card:hover { transform: scale(1.02); }
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.