CSS Animation

Interactive Demo

What is CSS Animation?

CSS Animations allow you to transition elements from one style configuration to another over a defined duration. Animations help create dynamic and engaging user interfaces by animating properties like color, position, opacity, and more.

You can control animation timing, delays, iteration counts, and keyframes to fine-tune how your elements animate in response to user interaction or page load.

Example Animation

Bounce

CSS Code

/* Simple bounce animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-25%);
  }
}

.animate-bounce {
  animation: bounce 1s infinite;
}

Key Points

  • Use @keyframes to define the animation steps.
  • Apply the animation using the animation shorthand property.
  • You can adjust duration, delay, easing functions, and iteration count.
  • Animations can run infinitely or for a specified number of times.
  • Combine with other CSS properties like transform and opacity for more complex effects.