WebCraft

Home / Elements / motion

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.

CSS 
.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

Questions

<details name>

Why does only one of my two animations run?

Two animations cannot share a property. Put the horizontal and the vertical drift on one element and the second translate wins outright rather than the two combining — which is why this needs one element per axis, an outer box and an inner one.

How far should the logo travel?

The box, less the logo: 100cqw - 100%. A percentage inside a translate resolves against the element's own size, so that expression is the only one that keeps it inside the edges at any container width.

Does it ever actually hit the corner?

Yes — after the lowest common multiple of the two durations. At 7.3s and 4.7s that is five minutes and forty-three seconds away, which is the joke. Under prefers-reduced-motion it parks in the middle instead of looping.

Also tagged motion