How to animate elements with CSS transitions and transforms

Short answer

CSS transitions animate property changes between states over time. CSS transforms move, rotate, scale, or skew elements without affecting layout, making them highly performant.

Steps

1. Define the initial state of the element.
2. Add transition: property duration easing.
3. Change the property on hover, focus, or via a class toggle.
4. Use transform instead of top/left for movement to avoid layout thrashing.

Example

.box {
  width: 100px;
  height: 100px;
  background: coral;
  transition: transform 0.3s ease, background 0.3s ease;
}
.box:hover {
  transform: scale(1.1) rotate(3deg);
  background: darkorange;
}

Tips

• Animate only transform and opacity for the smoothest 60fps animations.
• Use will-change: transform sparingly to hint the browser for complex animations.
• Avoid animating width, height, margin, or top/left on many elements simultaneously.