[css-values][css-conditional][css-animations] Proposal for time-based CSS

I'm adding this proposal to start the discussion and to see if it is possible to support conditions, animations and/or values based on the local time of the user.

Motivation

Over the years I've stumbled upon many uses for the users local time in layout and styles. This is currently possible my running small blocking scripts that set custom properties or start animations then can be used to style the page or component. If these values could be set directly in CSS, the code would be more cohesive and less brittle.

Use cases

1. Time based theming

A mini-game is set up to have a generative color theme based on the day of the year. Each day the game has a new combination of colors.

--background-color-1: ...;
--background-color-2: ...;
--background-color-3: ...;
--background-index: mod(day-of-year(), 3);


background-color: var(ident("--background-color-" var(--background-index)));

2. Time tables/schedules

A time table is showing the current programming for a big event. The current row should be highlighted.

--start-time: attr(data-start-time, <timestamp>);

background-color: if(
  time(now >= var(--start-time)): var(--highlight-background); 
  else: transparent;
);
scroll-snap-align: if(
  time(now >= var(--start-time)): start; 
  else: none;
);

3. Showing and hiding

A banner for a big event should show at a specific time.

display: none;

@media time(now >= 2026-03-14T10:30:00Z) {
  display: block;
}

3. Animations

A clock-animation is supposed to follow the time of the day.

animation-timeline: time-of-day();

Your page should start an animation at midnight new years eve:

timeline-trigger-name: --midnight;
timeline-trigger-source: time(2026-01-01T00:00:00Z);

Start by reviewing the proposal's use cases and examples for CSS Values, CSS Conditional Rules, and CSS Animations. The issue names no implementation files, tests, or single entry point, and completion is not defined beyond determining whether time-based conditions, values, or animations should be supported.