CSS Animations and Transitions: @keyframes, transition, animation

Main CSS Properties for Animations and Transitions

CSS provides two approaches for creating visual effects:

1. Smooth transitions (transition) — for simple effects (on hover, focus, etc.)
2. Animations (@keyframes + animation) — for complex and multi-step effects

Transition — Smooth Transitions

Used for animating property changes when element state changes.

.button {
  background: blue;
  transition: background 0.3s ease;
}

.button:hover {
  background: red;
}

Main Properties:

• transition-property — which property to animate
• transition-duration — duration
• transition-timing-function — easing function
• transition-delay — delay before start

Animation — Complex Animations

For multi-step animations with full control.

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

.element {
  animation: slideIn 1s ease-out;
}

Main Properties:

• animation-name — keyframes name
• animation-duration — duration
• animation-timing-function — easing
• animation-delay — delay
• animation-iteration-count — repeat count
• animation-direction — direction