Animating Multiple Properties

Multiple Property Transitions

Separate multiple property transitions with commas. Each can have its own duration, timing, and delay.

Example

.card {
  background: white;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition:
    background 0.2s ease,
    transform 0.3s ease-out,
    box-shadow 0.3s ease;
}

.card:hover {
  background: #f8f9fa;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

CSS

Full Editor

Pro Tip

Combining a subtle upward translate with an enhanced shadow on hover creates a convincing lift effect.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned