Transitions

Code

.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);
}

Explanation

Transitions smoothly interpolate a property's value between its start and end states. Specifying which properties transition (rather than all) avoids unexpected animation. cubic-bezier customizes easing, and transition-delay can stagger effects across elements.

More CSS3 Snippets