v144 · css · demo

Animation Demo

Three CSS animations that each target only one axis of background position using the new side-relative longhand syntax — while the other axis stays pinned with a side-relative value. Before Chrome 144, you couldn’t use background-position-x: right 10px; now you can pin and animate independently.

Your browser does not support side-relative values on background-position-x / background-position-y longhands. Chrome 144+ is required. The animation frames are shown below but the side-relative pins may not apply correctly.

side-relative longhand: checking…

1. Horizontal Sweep

background-position-x animates from left 0% → right 0%. Y is pinned to bottom 12px and never touched by the animation.

animates X only; Y stays at bottom 12px

.box {
  background-position-y: bottom 12px;   /* side-relative: pinned */
  background-position-x: left 0%;       /* starting X */
}
@keyframes sweep-x {
  from { background-position-x: left 0%; }
  to   { background-position-x: right 0%; }
}
.box.playing {
  animation: sweep-x 3s linear infinite alternate;
}

2. Diagonal Parallax

Two separate @keyframes animate X and Y at different durations (2s vs 3.5s), creating a smooth diagonal drift. Both use side-relative longhand values as animation endpoints.

X: 2s cycle — Y: 3.5s cycle

.box {
  background-position-x: left 0px;
  background-position-y: top 0px;
}
/* Two independent keyframe blocks: different durations = parallax */
@keyframes diag-x {
  from { background-position-x: left 0px; }
  to   { background-position-x: left 40px; }
}
@keyframes diag-y {
  from { background-position-y: top 0px; }
  to   { background-position-y: top 60px; }
}
.box.playing {
  animation: diag-x 2s linear infinite,
             diag-y 3.5s linear infinite;
}

3. Bounce

Y animates between top 10% and bottom 10% using the new side-relative longhand syntax. X is pinned to center and untouched. The ease-in-out timing gives a natural bounce feel.

Y bounces; X pinned to center

.box {
  background-position-x: center;        /* pinned — never animated */
  background-position-y: top 10%;       /* starting Y */
}
@keyframes bounce-y {
  from { background-position-y: top 10%; }
  to   { background-position-y: bottom 10%; }
}
/* Before Chrome 144: "top 10%" and "bottom 10%" were invalid
   on the longhand — only the shorthand accepted this syntax. */
.box.playing {
  animation: bounce-y 1.2s ease-in-out infinite alternate;
}

why this matters

/* Pre-Chrome 144: you had to use the shorthand and repeat the other axis */
@keyframes sweep-x-old {
  from { background-position: left 0% bottom 12px; }
  to   { background-position: right 0% bottom 12px; }
}

/* Chrome 144+: animate only X, Y stays out of the keyframes entirely */
@keyframes sweep-x-new {
  from { background-position-x: left 0%; }
  to   { background-position-x: right 0%; }
}
/* background-position-y: bottom 12px  stays separate — not re-interpolated */

1. Horizontal Sweep

2. Diagonal Parallax

3. Bounce

why this matters

see also