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

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


This content originally appeared on Bram.us and was authored by Bramus!

👨‍🔬 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:

~

🔥 Like what you see? Want to stay in the loop? Here's how:


This content originally appeared on Bram.us and was authored by Bramus!


Print Share Comment Cite Upload Translate Updates
APA

Bramus! | Sciencx (2023-05-24T18:23:25+00:00) The Yellow Fade Technique with Modern CSS using @starting-style. Retrieved from https://www.scien.cx/2023/05/24/the-yellow-fade-technique-with-modern-css-using-starting-style/

MLA
" » The Yellow Fade Technique with Modern CSS using @starting-style." Bramus! | Sciencx - Wednesday May 24, 2023, https://www.scien.cx/2023/05/24/the-yellow-fade-technique-with-modern-css-using-starting-style/
HARVARD
Bramus! | Sciencx Wednesday May 24, 2023 » The Yellow Fade Technique with Modern CSS using @starting-style., viewed ,<https://www.scien.cx/2023/05/24/the-yellow-fade-technique-with-modern-css-using-starting-style/>
VANCOUVER
Bramus! | Sciencx - » The Yellow Fade Technique with Modern CSS using @starting-style. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/05/24/the-yellow-fade-technique-with-modern-css-using-starting-style/
CHICAGO
" » The Yellow Fade Technique with Modern CSS using @starting-style." Bramus! | Sciencx - Accessed . https://www.scien.cx/2023/05/24/the-yellow-fade-technique-with-modern-css-using-starting-style/
IEEE
" » The Yellow Fade Technique with Modern CSS using @starting-style." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2023/05/24/the-yellow-fade-technique-with-modern-css-using-starting-style/. [Accessed: ]
rf:citation
» The Yellow Fade Technique with Modern CSS using @starting-style | Bramus! | Sciencx | https://www.scien.cx/2023/05/24/the-yellow-fade-technique-with-modern-css-using-starting-style/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts