Comment déclencher CSS3 fade-in effect en utilisant Javascript?

J'ai implémenté un effet de fond lors du Javascript pur, mais j'apprécie quelque chose d'autre, comme l'utilisation de CSS3. Existe-t-il un moyen de déclencher le fondu de CSS de Javascript?

Merci.

HTML:

<div id="foo" class="hidden">Hello!</div> 

CSS:

 div { -webkit-transition: opacity 1s linear; } .hidden { opacity: 0; } 

JS:

 setTimeout(function() { document.getElementById('foo').className = ''; }, 1000); 

http://jsfiddle.net/RYgsA/

Voici

HTML

 <div id="box"></div> 

CSS

 #box { width: 100px; height: 100px; background-color: black; opacity: 1; -webkit-transition:opacity 0.5s linear; -moz-transition:opacity 0.5s linear; -o-transition:opacity 0.5s linear; -ms-transition:opacity 0.5s linear; transition:opacity 0.5s linear; } 

JS

 function fadde() { var box = document.getElementById('box'); box.style.opacity = (box.style.opacity == 1) ? 0 : 1; } setInterval(fadde, 1000); 

Exemple à

https://jsfiddle.net/z54a75os/