CSS Animations

What Are Animations?

CSS animations allow elements to change styles smoothly over time using @keyframes. Unlike transition, which only animates between two states (start and end), animations can define multiple intermediate steps and repeat indefinitely.

With animations, you can:

Create continuous or looping effects (e.g., spinning icons, pulsing buttons).
Control each stage of an animation with custom keyframes.
Adjust speed, delays, and timing curves for precise effects.
Run animations automatically without requiring user interaction.

Animations are defined with @keyframes (for the sequence of style changes) and applied using the animation property, which can set the duration, delay, timing function, iteration count, direction, and more.

Key Properties

@keyframes — defines how styles change over time.
Example:

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

animation-name — the name of the animation to apply.
Values: a custom keyframe name that you decide or none.
animation-duration — total time for one animation cycle.
Values: time units like s (seconds) or ms (milliseconds), e.g., 2s.
animation-timing-function — controls the pacing of the animation.
Common values:
- ease — slow start and end, faster in the middle (default)
- linear — constant speed
- ease-in — slow start
- ease-out — slow end
- ease-in-out — slow start and end
- cubic-bezier(n,n,n,n) — custom curve
- steps(n, start|end) — stepped animation
animation-delay — how long to wait before starting.
Values: time units like 1s or 500ms.
animation-iteration-count — number of times the animation runs.
Values: a number (1, 3, etc.) or infinite.
animation-direction — defines the direction each cycle runs.
Values:
- normal — plays from start to end
- reverse — plays from end to start
- alternate — alternates direction each cycle
- alternate-reverse — starts in reverse, then alternates

Visual Examples

Slide:

@keyframes slideRight {
  0% { transform: translateX(0); }
  50% { transform: translateX(200px); }
  100% { transform: translateX(0); }
}

.slide-box {
  background: lightcoral;
  width: 100px;
  height: 50px;
  animation: slideRight 2s ease-in-out infinite;
}

Fade In and Out:

Watch me fade

@keyframes fadeInOut {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}
.fade-text {
  animation: fadeInOut 3s linear infinite;
}

Infinite Spinner:

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.spinner {
  animation: spin 1s linear infinite;
}

Bounce:

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}
.bouncer {
  animation: bounce 1s ease-in-out infinite;
}

Wiggle:

👋

@keyframes wiggle {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}
.wiggler {
  animation: wiggle 0.6s ease-in-out infinite;
}

Best Practices

Use transform and opacity for smooth performance
Avoid animating size/layout properties like height or top
Use animations to enhance UX, not distract

Practice Prompt

Create a bouncing ball animation using keyframes.

Here is the code to the prompt. Click to download

Need Help?

Ask the AI if you need help understanding or want to dive deeper in any topic

Menu