CSS Transforms and Basic Animations

Move, scale, rotate, and skew elements with CSS transforms, and create keyframe animations with @keyframes.

Overview

CSS transforms let you visually modify elements without affecting the document flow. Transforms are GPU-accelerated and perfect for smooth animations. The main 2D transform functions: - `translate(x, y)` moves the element - `scale(x, y)` scales the element - `rotate(angle)` rotates the element - `skew(x, y)` tilts the element You can combine multiple transforms: `transform: rotate(45deg) scale(1.2)` **CSS Animations** with `@keyframes` allow multi-step, looping animations: 1. Define the animation: `@keyframes name { from {} to {} }` 2. Apply it: `animation: name duration timing-function iteration-count` Transforms combined with transitions (from the previous topic) create smooth interactive effects. Transforms with `@keyframes` create continuous animations like spinners, pulses, and bounces.

Key Points

•transform does not affect document flow other elements do not shift
•translate(x, y) moves relative to element's current position
•scale(1.1) makes element 10% bigger; scale(0.9) makes it 10% smaller
•rotate(45deg) rotates clockwise by 45 degrees
•translateX(-50%) is used to center absolutely positioned elements
•@keyframes defines named multi-step animation sequences

Examples

Common transform patterns

/* Lift and scale on hover */
.card {
  transition: transform 0.3s ease;
}
.card:hover {
  transform: translateY(-8px) scale(1.02);
}

/* Rotate an icon */
.icon-rotate {
  transform: rotate(45deg);
}

/* Centering trick: move left by half own width */
.centered {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

transform: translateX(-50%) is the key to centering an element whose width is unknown.

@keyframes animation spinner

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;

  animation: spin 0.8s linear infinite;
  /* name | duration | timing | iteration */
}

@keyframes with percentage stops pulse

@keyframes pulse {
  0%   { transform: scale(1);    opacity: 1; }
  50%  { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1);    opacity: 1; }
}

.pulse-button {
  animation: pulse 2s ease-in-out infinite;
}

Use percentage stops for precise control over multi-step animations.

Common Mistakes

Using margin/top/left to animate position always prefer transform: translate() for performance
Forgetting that rotate() goes clockwise (positive values)
Setting animation on :hover instead of using transition both work but conventions differ

Note

For performance, prefer animating transform and opacity. These properties are GPU-composited and do not trigger layout recalculation. Animating width, height, margin, or top/left causes reflows and is much more expensive.

CSS Transforms and Basic Animations

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What does "transform: translateY(-8px)" do?