The CSS @starting-style at-rule lets you define the 'from' state for animations when elements are added to the DOM, eliminating the need for JavaScript workarounds. The post explains how @starting-style works, covers specificity gotchas when placing it separately from regular styles, and demonstrates how Polypane's elements panel makes debugging it straightforward by showing all element states (including non-current ones like :hover and @starting-style) simultaneously. This design philosophy — building devtools for web developers rather than browser implementors — is why Polypane supported @starting-style inspection over a year before Chrome DevTools added the feature.
Table of contents
The problem @starting-style solvesHow to add a starting styleKeeping the @starting-style separate and dealing with specificityInspecting and debugging the starting styleWhy Polypane's Elements panel makes this so easyPolypane is for web developers, not browser makers2 Impressions