w3c / w3c/csswg-drafts

[css-animations] [css-transitions] Allow authors to control the time threshold for properties with a discrete animation type

Open
#9,409 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-animations-2 css-transitions-2
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

It would be useful to give authors the ability to apply magic of a properties, such as content, display, content-visibility, visibility & overlay, on arbitrary properties; and make it more flexible. Something like transition-step, which accepts a list of single values from percentage, start, middle, end & auto.

I know these days this is solved by playing with keyframes or transition durations / delays, but there is a reason why certain properties have special rules, so having a common primitive for something like this would be quite helpful.

Use cases could be disabling at the start of hiding / enabling at the end of showing interactions, for example through user-select, pointer-events, touch-action, resize, overflow, overscroll-behavior & scrollbar-width; or custom properties, the values of which trigger style containers.

It might also be worth considering forcing a discrete animation type, on demand, as an aid to development for users with reduced motion needs. So that the intended property will set it for the affected properties, with the option to revert to the previous behavior via the initial normal value.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No file, test, or entry point is named. Start by reading the issue discussion alongside the CSS animations and CSS transitions specifications, then clarify the proposed syntax, supported values, and interactions with existing discrete-animation rules. Done requires an agreed design and corresponding specification changes.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.