Using @starting-style to transition items entering the DOM
Remember, near the beginning of the chapter, I mentioned that newer browsers support a means for transitioning items into the DOM? If you do remember, great, because this is where I tell you how. If you don’t remember, don’t worry, I’m still going to tell you.
As we have already discussed, ordinarily, items entering the DOM (typically by JavaScript) appear instantly. But the reality is, often when we are building applications, when we add something to the DOM, we want some kind of a visual effect to transition them in. Imagine a list item being added to a to-do application. It would be nice if the new item grows into the space, instead of merely snapping. That’s the kind of thing @starting-style exists for.
The @starting-style at-rule lets you wrap some styles for an element, and these are the styles that the element is set to the moment it enters the DOM. With a transition applied (@starting...
