How to create smooth CSS animations with @keyframes

Short answer

@keyframes define CSS animations by specifying styles at various points during the animation sequence, which are then applied using the animation property.

Steps

1. Define a @keyframes rule with a name and percentage stops.
2. Apply it with animation: name duration timing-function.
3. Use animation-fill-mode to persist the end state.

Example

@keyframes slideIn {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.panel {
  animation: slideIn 0.5s ease-out forwards;
}

Tips

• Use animation-delay to stagger multiple elements.
• Prefer transform and opacity for performant animations.
• Consider prefers-reduced-motion for accessibility.