[css-animations] [css-transitions] Allow authors to control the time threshold for properties with a discrete animation type
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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