Creating Keyframe Animations

CSS animations allow elements to gradually change from one style to another.

Unlike transitions, animations can loop, reverse, and have multiple keyframes.

/* Define Animation */
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

/* Apply Animation */
.box {
  animation: slide 2s ease-in-out infinite;
}

/* Multiple Keyframes */
@keyframes colorChange {
  0% { background: red; }
  25% { background: yellow; }
  50% { background: blue; }
  75% { background: green; }
  100% { background: red; }
}

@keyframes - Define the animation sequence
animation-name - Name of @keyframes
animation-duration - Length of animation
animation-timing-function - Speed curve
animation-iteration-count - How many times (infinite)
animation-direction - Normal, reverse, alternate
animation - Shorthand property

Try Animations

<div class="bounce">Bouncing Box</div>
<div class="spin">Spinning Box</div>
<div class="pulse">Pulsing Box</div>

Note: Use animations for attention-grabbing effects, loading indicators, and decorative elements.

CSS Animations

Creating Keyframe Animations

Try Animations