animation + cqw

The logo that never hits the corner

CaveatTwo animations cannot share a property. Put the horizontal and the vertical drift on one element and the second translate wins outright instead of the two combining — which is why this needs one element per axis. And 100% in a translate is the element’s own size, so the travel is 100cqw - 100%: the box, less the logo.

FallbackIt does hit the corner. The wait is the lowest common multiple of the two durations, so 7.3s and 4.7s put it 5 minutes 43 seconds away. Under prefers-reduced-motion it parks in the middle instead of looping forever.

.box { container-type: size; }

/* one element per axis, or they overwrite */
.drift {
  animation: x 7.3s linear infinite alternate;
}
.logo {
  animation: y 4.7s linear infinite alternate;
}

/* 100% is the logo, cqw is the box */
@keyframes x {
  to { translate: calc(100cqw - 100%) 0; }
}
@keyframes y {
  to { translate: 0 calc(100cqh - 100%); }
}

Published 18 Aug 2026