Make fade in-out effet court infini (JS pur, non jQuery)

Question

je cherchais un script pour faire une div à se faner dedans et dehors, et a trouvé cette question fade in and fade out in pure javascript without jquery

utilisateur bgoldst a donné une belle solution ça a marché pour moi. Mais j'aurais besoin que le fade in-out s'exécute en boucle, pas seulement une fois comme indiqué par le code de bgoldst. Je suis totalement nouveau chez JS et je ne sais pas comment le faire fonctionner, aucune suggestion?

EDIT: Je l'ai trouvé une solution intermédiaire avec la suggestion de Luc et les suggestions de Kai de Pure JavaScript fade in function

C'est

 <script type="text/javascript"> 
     var div = document.getElementById("foo"); 
     setInterval(function() { 
     div.style.transition="opacity 1.5s"; 
     div.style.opacity=0; 
     }, 1500); 
     setInterval(function() { 
     div.style.transition="opacity 1.5s"; 
     div.style.opacity=1; 
     }, 3005); 
     </script> 

Cependant, l'effet de fondu/sortie n'a pas un comportement symétrique.

Answer 1

Vous pouvez utiliser CSS pour cela, pas de Javascript nécessaire. Il suffit d'utiliser la propriété d'animation CSS (ensemble des images clés si vous voulez, etc.), puis définissez cette propriété:

animation-iteration-count: infinite;

Sur la base de votre commentaire, voici un stylo, je fait cela faire ce que vous voulez - vous Il suffira de changer l'animation de changer la couleur d'arrière-plan pour la faire disparaître. J'espère que cela:

http://codepen.io/lukeschunk/pen/pyPpQO