CSS Motion Lab

Box Animations

An interactive playground for testing CSS motion patterns: slide, pulse, orbit, timing, themes, and accessible motion settings.

GitHub

Motion

Speed 1x Theme

01 / Translate

Sliding box

A nested box moves across its parent with transform, keeping layout stable while the visual layer moves.

02 / Scale

Two elements share the same keyframes with staggered delays, creating rhythm without extra markup logic.

03 / Rotation

A parent rotates while the child holds its shape, showing how composition can make simple motion feel richer.

Reusable patterns

.box {
  animation: slideBox 2.2s ease-in-out infinite alternate;
}

@keyframes slideBox {
  to { transform: translateX(calc(100% - 66px)); }
}

.box {
  animation: pulseBox 1.7s ease-in-out infinite;
}

@keyframes pulseBox {
  50% { opacity: 1; transform: scale(1.18) rotate(8deg); }
}

.orbit {
  animation: orbitPath 4s linear infinite;
}

@keyframes orbitPath {
  to { transform: rotate(360deg); }
}

Visual QA