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

loaded.css

img {
  opacity: 0;
  -webkit-transition: opacity .2s;
  -moz-transition: opacity .2s;
  -o-transition: opacity .2s;
  transition: opacity .2s;
}

img:loaded {
  opacity: 1;
}

body:loaded div#someId {
content: 'something heavy I loaded in after the important stuff'
}
Of course javascript can do that but there is a trend of trying to get css to cover more ground, and it's a perfectly valid trend.

You can do this with keyframes, though I agree a dedicated pseudo selector would be nice.

@keyframes fade_in {
    from { opacity: 0; }
    to { opacity: 1; }
}

img {
    animation: fade_in 0.2s linear;
    opacity: 1;
}

(Yes, I am aware this is a decade-old post.)

I would love that to be possible as well. I have a carousel for whose elements I set a background so that something is visible while images, videos and iframes haven't loaded yet. I would like to remove that background after each element has loaded.

@lthoerner does the animation only trigger once the element has loaded?

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.