-
-
Save bastianallgeier/1422798 to your computer and use it in GitHub Desktop.
img { | |
opacity: 0; | |
-webkit-transition: opacity .2s; | |
-moz-transition: opacity .2s; | |
-o-transition: opacity .2s; | |
transition: opacity .2s; | |
} | |
img:loaded { | |
opacity: 1; | |
} |
Coolest thing would be to have this for all dynamically loaded contents. But maybe it's just too fancy for css and should be done with js anyway.
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?
Fading them in was just one example. There are loads of cool things you could do with this IMHO.