CSS Animations

CSS animations bring web pages to life by smoothly changing property values over time. They range from simple hover effects to complex multi-step sequences — all without JavaScript.

CSS Transitions

Transitions animate property changes between two states. They require a trigger (like :hover) and define how the change happens:

.button {
  background: #3498db;
  transition: background 0.3s ease, transform 0.2s ease;
}
.button:hover {
  background: #2980b9;
  transform: translateY(-2px);
}

Transition properties: transition-property, transition-duration, transition-timing-function (ease, linear, ease-in, ease-out, cubic-bezier()), and transition-delay.

CSS Transforms

The transform property modifies an element's shape and position without affecting the layout. Common functions:

• translate(x, y) — moves an element
• scale(x, y) — resizes (1 = original)
• rotate(angle) — rotates (deg, rad, turn)
• skew(x, y) — skews along axes
• transform-origin — sets the pivot point (default center)

Combine multiple transforms: transform: scale(1.1) rotate(5deg) translateX(10px);

Keyframe Animations

The @keyframes rule defines multi-step animations with percentage stages:

@keyframes slideIn {
  0%   { transform: translateX(-100%); opacity: 0; }
  50%  { transform: translateX(10%); }
  100% { transform: translateX(0); opacity: 1; }
}
 
.element {
  animation: slideIn 0.8s ease-out forwards;
}

Animation Properties

• animation-name — @keyframes name
• animation-duration — how long one cycle takes
• animation-timing-function — speed curve
• animation-delay — delay before starting
• animation-iteration-count — number of cycles (1, 3, infinite)
• animation-direction — normal, reverse, alternate, alternate-reverse
• animation-fill-mode — none, forwards, backwards, both
• animation-play-state — running, paused

Performance Tips

Animating certain properties triggers layout recalculations and repaints, which hurts performance. For smooth 60fps animations:

• Prefer transform and opacity — these only trigger compositing
• Avoid animating width, height, top, left, margin, padding — these trigger layout
• Use will-change: transform, opacity on animated elements
• Use transform: translate() instead of top/left
• Consider prefers-reduced-motion: reduce for accessibility