Skip to content

Instantly share code, notes, and snippets.

@bastianallgeier

bastianallgeier/loaded.css

Created December 2, 2011 10:57
Show Gist options
  • Save bastianallgeier/1422798 to your computer and use it in GitHub Desktop.
Save bastianallgeier/1422798 to your computer and use it in GitHub Desktop.
Download ZIP
I'd love to have a :loaded pseudo selector in css, which makes it possible to style elements when they are actually loaded – like images, iframes or the entire document
Raw
loaded.css
img {
opacity: 0;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
}
img:loaded {
opacity: 1;
}
@sciloqi
Copy link

sciloqi commented Aug 21, 2024 •
edited
Loading

We're getting closer 😂

img {
  transition: opacity 0.25s linear;
  @starting-style {
    opacity: 0;
  }
}

Unfortunately, this only seems to affect the appearance of the element on the page and not the actual loading process of the image, but it does work if the image is loading quickly or is already loaded.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment