{
  "id": 11134336,
  "title": "Entry Animations with CSS @starting-style",
  "url": "https://urgent.news/2026/10/01/entry-animations-with-css-starting-style",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-01T07:23:12.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/salehmubashar/entry-animations-with-css-starting-style-34f1"
  },
  "original_language": "en",
  "account": "CSS @starting-style is a powerful tool for creating smooth entry animations on web elements. It addresses common challenges when animating from display: none by defining explicit starting values for CSS properties at the moment an element first loads. This rule simplifies the process of creating transitions right from the start, resulting in smoother and more visually appealing effects.\n\nTo leverage @starting-style, you can either nest it within an element's ruleset or define it separately using a selector. However, it's important to note that nesting @starting-style within a pseudo-element (such as ::before or ::after) is not supported, as the styles will apply to the main element instead of the pseudo-element.\n\nThe @starting-style at-rule shares the same specificity as the original rule, so placing the @starting-style at-rule after the original rule ensures proper application of starting styles. This rule works hand-in-hand with the transition property, where the @starting-style defines the initial state before an element becomes visible, and the transition defines the final state.\n\nOne practical application of @starting-style is in creating entry effects or transitions for elements that are initially hidden, particularly when transitioning from display: none to a visible state. For example, you can use @starting-style to animate text fading in on page load or to create smooth transitions for popups and dialogs.\n\nA notable advantage of using @starting-style is its ability to handle smooth transitions for elements that change from display: none to display: block. Typically, animating such a transition would be difficult due to the change in the display property, but @starting-style provides a solution by defining an initial state for the element once it becomes visible.\n\nAn illustrative example is the use of the dialog element, where its body switches between display: none and display: block when toggled. Without @starting-style, animating this transition would be impossible due to the display property change. However, @starting-style allows you to define the initial state of the element (opacity: 0) and then smoothly transitions it to the final state (opacity: 1) using a transition property.",
  "summary": "Entry animations can be tricky—between handling DOM load times and animating from display: none , it's easy to get stuck. The @starting-style rule simplifies this by letting you explicitly set starting values for CSS properties when an element first loads, creating smoother transitions right from the get-go. You can view the complete post with additional examples here . The Basics @starting-style…",
  "key_points": [
    "@starting-style simplifies entry animations by defining initial CSS values for hidden elements.",
    "It cannot be nested within pseudo-elements like ::before or ::after.",
    "@starting-style works with transition property for smooth element visibility changes."
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}