Simplifying Entry Animations with @starting-style

Creating smooth entry animations can be challenging. The complexities of DOM load times and animating from display: none often lead to frustrating results. The @starting-style rule offers a streamlined solution by allowing you to explicitly define initial values for CSS properties when an element first appears, ensuring seamless transitions from the start.

Explore the full article with more examples here.

---

Understanding the Fundamentals

@starting-style sets the initial state of your CSS properties before the element becomes visible—its "before" state. The "after" state is defined in your standard CSS rules. Here's how it works:

element {
  transition: opacity 0.5s ease-in;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

Upon initial load, @starting-style sets the element's opacity to 0. It then smoothly transitions to the final state (opacity: 1 in this case). This functionality also applies when an element transitions from display: none to visible, making it perfect for animating toggled elements.

Utilizing @starting-style

You can apply @starting-style in two ways: nested within an element's ruleset (no selector needed) or defined separately with a selector.

Important Note: Nesting @starting-style within a pseudo-element (like ::before or ::after) won't work as intended. The styles will affect the parent element, not the pseudo-element.

/* Standalone */
@starting-style {
  element {
    opacity: 0;
  }
}

element {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

/* Nested */
element {
  opacity: 1;
  transition: opacity 0.5s ease-in;

  @starting-style {
    opacity: 0;
  }
}

Key Consideration: @starting-style and the "original rule" have equal specificity. For reliable application, always place the @starting-style at-rule after the "original rule."

Practical Applications

@starting-style excels at creating entry effects and transitions. Consider its use for fading in text on page load or animating popups and dialogs. Here are a couple of examples:

Animating from display: none

The primary benefit of @starting-style is its ability to create smooth transitions for initially hidden elements, particularly those transitioning from display: none. Without @starting-style, animating this transition is difficult due to the lack of a defined starting state. @starting-style solves this by providing that initial state.

A dialog element provides a clear illustration. Its body toggles between display: none and display: block. Animating this usually isn't possible because of the display property change, but @starting-style makes it achievable.

Fading and Sliding on Page Load

In this example, @starting-style defines the "before" state for both elements. The fade effect sets initial opacity to 0, while the slide effect uses a left translation.

---

This article focused on entry animations. Exit effects are not handled by @starting-style. For exit animations, you'll need to explore transition-behavior, a topic for another discussion.

Read the complete article here. Visit my blog here.

The above is the detailed content of Simplifying Entry Animations with @starting-style. For more information, please follow other related articles on the PHP Chinese website!