Skip to content
CSS3

Transitions

Smoothly interpolate properties on state change.

#transitions#hover

Code

css3
.button {
  background: #1976d2;
  color: #fff;
  transition: background 0.3s ease, transform 0.2s ease;
}

.button:hover {
  background: #1565c0;
  transform: translateY(-2px);
}

/* Transition all changed properties (use sparingly) */
.card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stagger via transition-delay */
.list li {
  transition: opacity 0.3s;
  transition-delay: calc(var(--i) * 50ms);
}