[csswg-drafts] [css-animations][web-animations] Animations based on absolute/wall time (#13664)

johannesodland has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-animations][web-animations] Animations based on absolute/wall time ==
Splitting off from  https://github.com/w3c/csswg-drafts/issues/13655

It is sometimes necessary to schedule the start of an animation relative to an absolute (wall) time.
This is currently only possible to achieve by scheduling the animation to play using javascript.
Avoiding flashes of wrongly styled content is hard.

Additionally, if the animation should follow the wall time, its current time has to be synced with the wall time every time the animation is restarted. Otherwise the animation would play from its current hold time and be out of sync.

Scroll-driven animations on the other hand are automatically automatically aligned based on their range when they are played.

## Proposal

Add functionality to allow an animation to automatically align its start time with a range start defined in "wall" time. Similar to scroll-driven animations it should support an `auto` duration on the effect.

```js
const anim = new Animation(coolEffect);
anim.rangeStart = {
  rangeName: 'absolute', 
  offset: Temporal.ZonedDateTime.from('2026-01-01T00:00:00+01:00[Europe/Oslo]')
};
anim.play();
```

```css
animation: --cool-animation 2s;
animation-range-start: absolute 2026-01-01T00:00:00+01:00[Europe/Oslo];
```

## Use cases

### 1. An animation running for the duration of an event

```css
animation: --event-animation;
animation-range-start: absolute 2026-03-01T00:00:00+01:00[Europe/Oslo];
animation-range-end: absolute 2026-04-15T00:00:00+01:00[Europe/Oslo];
```


### 2. A presentational clock that shows the wall time.

```css
@keyframes --hand-rotation {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

.minute-hand {
  animation: --hand-rotation 3600s infinite;
  animation-range-start: absolute 2026-01-01T00:00:00+01:00[Europe/Oslo]
}
```

Range names and time formats up for bike shedding.
This proposal requires the ability to represent a zoned date time in CSS. It would be beneficial to be able to specify such a type both in absolute and in relative time, but I'm deferring that to a separate proposal.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13664 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 16 March 2026 19:45:46 UTC