How can I fade in new HTML elements with CSS

Question

How is it possible to make all new HTML elements fade in using only CSS without any bit of JavaScript?

Answer 1

You can use CSS transitions

Here is some sample code:

<style>
.swapMe img { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .swap1, .swapMe:hover .swap2 { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .swapMe:hover .swap1, .swap2 { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; }
</style>

<div class="swapMe">
  <img src="http://0.tqn.com/d/webdesign/1/0/D/m/1/jaryth1.jpg" class="swap1" style="position: absolute;">
  <img src="http://0.tqn.com/d/webdesign/1/0/E/m/1/jaryth2.jpg" class="swap2">
</div>