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?