[css-animations][web-animations] Animations based on absolute/wall time

[johannesodland]

Splitting off from #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.

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

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

As wall-time does not progress monotonically, it might be necessary with a new timeline:

animation-timeline: wall-time(Europe/Oslo);

Use cases

1. An animation running for the duration of an event

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.

@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, timeline name 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.

Related proposals

• [mediaqueries] Dates #9710
• [css-values] Time based numerical functions #13659