- From: Kevin Babbitt via GitHub <noreply@w3.org>
- Date: Thu, 19 Mar 2026 21:17:49 +0000
- To: public-css-archive@w3.org
kbabbitt has just created a new issue for https://github.com/w3c/csswg-drafts: == Proposal: CSS Text Transitions & Animations == [Explainer](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSTextTransitions/explainer.md) This is a first round of thinking aimed at addressing the need for animation effects at sub-element units. These effects are showing up in use cases such as chat interfaces and textual progress animations.    The challenge Web authors face today is that the unit of currency for animations on the Web is the element. Achieving these effects thus requires authors to split their text into separate elements, such as `<span>`s. This generates extra overhead in DOM, style calculation, and layout. It also fragments the markup away from its natural semantic structure, which makes it harder for accessibility tools to work with and may necessitate ARIA workarounds. --- The core idea is to extend CSS Transitions & Animations with a few new properties: ```css transition-text-interval: <time [0s,∞]># transition-text-unit: [ none | character | word | line ]# transition-text: [ <transition-text-interval> || <transition-text-unit> ]# animation-text-interval: <time [0s,∞]># animation-text-unit: [ none | character | word | line ]# animation-text: [ <animation-text-interval> || <animation-text-unit> ]# ``` These properties exhibit the same list behavior as other `transition-*` and `animation-*` properties. My general mental model for how these would work is: 1. The end state of any text transition or animation should be the same as if the changed property were applied to the element as a whole. 2. Barring (1), the effect should proceed as if individual animations were applied to inline elements subdividing the content. There will be cases where those two principles come into conflict. For example, a scale transform animation will behave differently when applied to three neighboring words individually versus three words treated as a single unit. We would need to account for such cases. It also means that not all properties would be eligible for a text transition. For example, `width` and `height` have no effect when applied to an inline element, so if a transition with text transition properties were specified on `width` on a `<div>`, the text transition properties would be ignored, and it would be treated as a normal transition. There are, of course, lots of interesting questions to consider: * How to handle descendant elements, and whether different categories of descendants should be treated differently (inline vs. block; replaced vs. not) * How to handle changes to text content during and after a text animation * How much detail the specification needs to provide in cases where animating individual text units would yield a different end state than animating the text as a whole There are some ideas for handling these in the explainer. --- Questions for discussion in the Working Group: * Is this something we should pursue in CSS? * Does the general shape of the API make sense? * How should the new properties integrate with the existing `transition` and `animation` shorthands? * What other important questions or use cases should be considered? Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13689 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 19 March 2026 21:17:50 UTC