The Yellow Fade Technique with Modern CSS using @starting-style

👨‍🔬 The CSS feature described in this post are still brand new and only have experimental support. To check this demo you’ll need Chrome Canary 115.0.5788.0 with the #enable-experimental-web-platform-features flag enabled.

~

Yellow Fade Technique with Modern CSS

Remember the Yellow Fade Technique from back in the day? With Modern CSS this is now SUPER EASY to recreate!

div {
  transition: background-color 0.5s;
  background-color: transparent;

  @starting-style {
    background-color: yellow;
  }
}

With this bit of CSS in place, newly inserted divs will transition the background-color from yellow to transparent upon insertion. Check out this recording:

No more hacking with CSS animations and JavaScript!

Here’s how the Modern CSS approach works: when an element’s styles change, it can do a transition from one value to an other. But when inserting an element there is nothing to transition from! With @starting-style this changes, as it allows you to declare these “before” set of styles.

☝️ This at-rule was known as @initial for a short period of time, but got renamed to @starting-style as part of the standardization process. Earlier versions of Canary support the old name.

~

Demo

Try it out yourself in this demo:

See the Pen Yellow Fade Technique with Modern CSS by Bramus (@bramus) on CodePen.

~

Browser support

@starting-style is currently only available in Chrome Canary 115.0.5788.0 with the Experimental Web Platform Features flag set to enabled.

~

# Spread the word

To help spread the contents of this post, feel free to retweet its announcement tweet:

~

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.