"Introduction Have you heard of the @starting-style at-rule? It's an interesting new tool that lets us use CSS transitions for enter animations. For example, let's suppose we have some UI where elements get added dynamically to the page, and we want them to fade in: When you click the "Add Element" button, a new purple square is generated and added to the page, and a CSS keyframe animation fades it in over 1 second."
"Historically, the big limitation with CSS transitions has been that they only apply when a targeted CSS property changes from one value to another. If we want a property to animate when an element is created, we've needed to use CSS keyframe animations, like I'm doing in the example above. The new @starting-style API is a workaround for this limitation. We can provide an alternative set of CSS declarations. When the element is created, it'll immediately transition from these initial styles."
The @starting-style at-rule enables CSS transitions to run as enter animations by supplying initial styles that are removed when an element is created. Newly added elements can transition from those initial values to the main stylesheet values, enabling fades and similar effects without keyframes. Browser support remains inconsistent, so animations may not appear in all environments. The @starting-style CSS is handled differently than @keyframes, which can produce unexpected issues. Familiarity with CSS and specificity helps diagnose and work around these differences when implementing enter animations using @starting-style.
Read at Joshwcomeau
Unable to calculate read time
Collection
[
|
...
]