Transitioning CSS Transforms

Transform Transitions

Transitioning transform is the most performant way to animate movement, rotation, and scale. Transforms use the GPU and do not trigger layout recalculation.

Example

.icon {
  display: inline-block;
  transition: transform 0.3s ease;
}

.icon:hover { transform: rotate(15deg) scale(1.1); }

.btn { transition: transform 0.2s ease; }
.btn:active { transform: scale(0.96); }

.panel { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.panel.open { transform: translateX(0); }
.panel.closed { transform: translateX(-100%); }

CSS

Full Editor

Pro Tip

Animate transform and opacity for smooth 60fps animations — they are the only GPU-composited properties.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned