RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconGit IconSpeaking IconTools Icon
A series of images of an avatar doing a bunch of skateboard tricks.

Normally @keyframes would be used for this technique, but with @starting-style we can transition.

* {
  transition: opacity .5s ease-in;
  @starting-style { opacity: 0 }

Triggers via:

  • page load
  • inserted into the DOM
  • going from display none to a visible display value

I feel like there's more use cases to explore. Let me know what you find‽

Try it on Codepen

Crawl the CSS Webring?

previous sitenext site
a random site