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

~

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.

~

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:

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

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

@starting-style {
background-color: yellow;
}
}
“`https://t.co/Sq03wvSB8a pic.twitter.com/fi9EnoGtMx

— Bramus (@bramus) May 23, 2023

~