HomeMotion & Animation
Preview
css
Code
css
/* Staggered fade-up */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-item {
  animation: fadeUp 0.55s cubic-bezier(0.16,1,0.3,1) backwards;
}

.fade-item:nth-child(1) { animation-delay: 0.05s; }
.fade-item:nth-child(2) { animation-delay: 0.10s; }
.fade-item:nth-child(3) { animation-delay: 0.15s; }
.fade-item:nth-child(4) { animation-delay: 0.20s; }
Related Blocks
css
Easing Functions
Bezier values for ease-in, ease-out, and spring.
css
Loading Spinner
3 different loading animations.
css
Scale & Bounce
Scale and bounce micro-interactions.