CSS Transitions & Animations

Why use motion?

Motion can show change, provide feedback and help users understand relationships between interface states. Good motion should support the interface instead of distracting from it.

CSS transition basics

A transition smoothly interpolates a CSS property from one value to another when the property changes.

.button {
  background: #0b7cff;
  transition: background-color 200ms ease;
}

.button:hover {
  background: #075fd1;
}

Without a transition the color changes immediately. With a transition, the browser animates between the two states.

Transition properties

The main transition properties are:

• transition-property — which property should animate.
• transition-duration — how long the transition takes.
• transition-timing-function — how speed changes over time.
• transition-delay — how long to wait before starting.

.card {
  transition-property: transform, box-shadow;
  transition-duration: 180ms;
  transition-timing-function: ease-out;
  transition-delay: 0ms;
}

Transition shorthand

You can combine transition settings in one declaration.

.card {
  transition:
    transform 180ms ease-out,
    box-shadow 180ms ease-out;
}

Timing functions

Timing functions control acceleration and deceleration during motion.

.a { transition-timing-function: linear; }
.b { transition-timing-function: ease; }
.c { transition-timing-function: ease-in; }
.d { transition-timing-function: ease-out; }
.e { transition-timing-function: ease-in-out; }

You can also use cubic-bezier() for custom easing.

.panel {
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}

CSS transforms

transform changes an element visually without normal document flow re-layout for common transform functions.

.card:hover {
  transform: translateY(-4px);
}

.icon:hover {
  transform: scale(1.08);
}

.arrow {
  transform: rotate(90deg);
}

Hover and focus effects

Interactive feedback should not depend on hover only because keyboard and touch users may not have a hover state.

.button {
  transition: transform 160ms ease,
              background-color 160ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  background-color: #075fd1;
}

@keyframes

For multi-step or repeating motion, use @keyframes.

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

You can also use percentages for multiple stages.

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

Animation properties

Apply keyframes with the animation properties.

.notice {
  animation-name: fade-up;
  animation-duration: 400ms;
  animation-timing-function: ease-out;
  animation-delay: 100ms;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both;
}

Animation shorthand

The shorthand combines the most common animation settings.

.notice {
  animation: fade-up 400ms ease-out 100ms 1 both;
}

Iteration and direction

Animations can repeat and change direction.

.loader {
  animation: spin 900ms linear infinite;
}

.pulse {
  animation: pulse 1.5s ease-in-out infinite alternate;
}

Use infinite animations sparingly. Constant motion can be distracting and may affect users sensitive to motion.

animation-fill-mode

animation-fill-mode controls which keyframe styles apply before or after the animation runs.

• none — default behavior.
• forwards — keep the final keyframe style after finishing.
• backwards — apply the starting keyframe during delay.
• both — combines forwards and backwards behavior.

Performance-friendly motion

For many interface animations, transform and opacity are preferred because they often avoid expensive layout work compared with animating properties such as width, height, top or left.

/* Better for common UI movement */
.panel {
  transform: translateX(0);
  opacity: 1;
}

/* Avoid using layout-changing animation unnecessarily */
.panel-bad {
  left: 200px;
  width: 500px;
}

prefers-reduced-motion

Some users ask the operating system/browser to reduce non-essential motion. CSS can respect that preference.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Motion should not carry meaning alone

Do not make motion the only way to communicate an error, success or state change. Pair it with text, icons, color with sufficient contrast, or other clear state cues.

Best practices

• Motion ka clear purpose rakho.
• Short interface transitions ko subtle rakho.
• transition: all ke bajay explicit properties prefer karo.
• Common movement ke liye transform and opacity use karo.
• Hover ke saath keyboard focus feedback bhi provide karo.
• Infinite animation ko limited rakho.
• prefers-reduced-motion respect karo.
• Motion ke bina bhi UI understandable rakho.

Common beginner mistakes

• Har element par animation add kar dena.
• Very long transition durations use karna.
• transition: all blindly use karna.
• Hover-only feedback banana.
• Layout properties ko unnecessarily animate karna.
• Infinite animations ko multiple components par continuously run karna.
• Reduced-motion preference ignore karna.
• Animation finish hone ke baad fill-mode behavior samjhe bina unexpected state dekhna.