Rolling Square: CSS Keyframe Animation

Rolling Square

A square tips over its front corner four times across the floor, fading in and out at the ends. Each roll resets to 0 while a steps(4) translate hops it one square on, so the loop never jumps.

Also known as: rolling square animation css, tumbling box animation, square rolling on floor css.

Color Base size 16px Dark background

HTML

<div class="kfa-rolling-square"><div class="kfa-rolling-square-mover"><div class="kfa-rolling-square-box"></div></div></div>

CSS

.kfa-rolling-square {
  --c: var(--kfa-color, #3b82f6);
  font-size: var(--kfa-size, 16px);
  position: relative;
  width: 16em;
  height: 5em;
  border-bottom: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
}
/* hops one square to the right each time a roll ends */
.kfa-rolling-square-mover {
  position: absolute;
  left: 1.6em;
  bottom: 0;
  animation:
    kfa-rolling-square-advance 3.2s steps(4) infinite,
    kfa-rolling-square-fade 3.2s linear infinite;
}
/* each roll: tip over the bottom right corner, then rest a beat */
.kfa-rolling-square-box {
  width: 3em;
  height: 3em;
  border-radius: 0.35em;
  background: var(--c);
  transform-origin: 100% 100%;
  animation: kfa-rolling-square-roll 0.8s infinite;
}
@keyframes kfa-rolling-square-roll {
  0% { transform: rotate(0); animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  72%, 100% { transform: rotate(90deg); }
}
@keyframes kfa-rolling-square-advance {
  to { transform: translateX(12em); }
}
@keyframes kfa-rolling-square-fade {
  0% { opacity: 0; }
  10%, 86% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .kfa-rolling-square, .kfa-rolling-square *, .kfa-rolling-square::before, .kfa-rolling-square::after, .kfa-rolling-square *::before, .kfa-rolling-square *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --kfa-color on the element or a parent. Currently previewing #3b82f6.
Base size: set --kfa-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Similar keyframe animations