CSS Transitions

Transition Properties

Basic Syntax

.button {
  transition: property duration timing-function delay;
}

transition-property

Which properties to animate:

.button {
  transition-property: background-color;
  transition-property: all;           /* All properties */
  transition-property: transform, opacity; /* Multiple */
}

transition-duration

How long the transition takes:

.button {
  transition-duration: 0.3s;
  transition-duration: 300ms;    /* Milliseconds */
  transition-duration: 0.3s 0.5s; /* Different for each property */
}

transition-delay

When to start the transition:

.button {
  transition-delay: 0.1s;
  transition-delay: 0s 0.2s; /* Different for each property */
}

Shorthand

.button {
  transition: background-color 0.3s ease;
  transition: all 0.3s ease 0.1s;
  transition: transform 0.2s ease, opacity 0.3s ease;
}

Triggering Transitions

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

.button:hover {
  background: darkblue;
}

.button:active {
  transform: scale(0.98);
}

Transition Events (JavaScript)

element.addEventListener('transitionend', () => {
  console.log('Transition complete');
});

Timing Functions

Built-in Timing Functions

.button {
  transition-timing-function: ease;        /* Default */
  transition-timing-function: linear;      /* Constant speed */
  transition-timing-function: ease-in;     /* Slow start */
  transition-timing-function: ease-out;    /* Slow end */
  transition-timing-function: ease-in-out; /* Slow start and end */
}

cubic-bezier

Custom timing curves:

.button {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  /* Material Design standard */
}

/* Snappy */
transition-timing-function: cubic-bezier(0.2, 0, 0, 1);

/* Bouncy */
transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);

steps()

Stepped animations:

.typewriter {
  transition-timing-function: steps(10);
}

Visual Comparison

ease:        -----------/
linear:      -----------
ease-in:     __________/
ease-out:    -----------
ease-in-out: ___-------___

Best Practices

Performance

/* Good: GPU-accelerated properties */
.button {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Bad: Causes layout/paint */
.button {
  transition: width 0.3s ease, height 0.3s ease;
}

GPU-Accelerated Properties

• transform
• opacity
• filter

Respect User Preferences

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

Common Patterns

/* Fade in */
.fade-in {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fade-in.visible {
  opacity: 1;
}

/* Slide up */
.slide-up {
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.slide-up.visible {
  transform: translateY(0);
  opacity: 1;
}

/* Scale on hover */
.card {
  transition: transform 0.2s ease;
}
.card:hover {
  transform: scale(1.02);
}

Transition vs Animation

Feature	Transition	Animation
Trigger	State change	Keyframes
Direction	A to B	A to B to C...
Control	Limited	Full control
Iteration	Once	Infinite
Delay	One delay	Multiple delays