Make Fade In-Out-Effekt läuft unendlich (reine JS, nicht jQuery)

Question

Ich war auf der Suche ein Skript ein Div zu machen und aus zu verblassen, und fand diese Frage fade in and fade out in pure javascript without jquery

Benutzer bgoldst eine schöne Lösung gab das hat für mich funktioniert. Aber ich würde die Einblendung benötigen, um in der Schleife zu laufen, nicht nur einmal, wie von bgoldsts Code angegeben. Ich bin völlig neu bei JS und weiß nicht, wie man es zur Arbeit bringt, irgendeinen Vorschlag?

EDIT: Ich habe eine Zwischenlösung mit Lukes Vorschlag und Kais Vorschlägen von Pure JavaScript fade in function Die

gefunden

 <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> 

Allerdings ist die Einblendung/Effekt aus nicht über ein symmetrisches Verhalten.

Answer 1

Sie können CSS dafür verwenden, kein Javascript erforderlich. Verwenden Sie einfach die CSS-Animation Eigenschaft (Keyframes, wenn Sie wollen, usw.), und setzen Sie diese Eigenschaft:

animation-iteration-count: infinite;

Basierend auf Ihren Kommentar, hier ist ein Pen ich das gemacht wird tun, was Sie wollen - Sie Ich muss nur die Animation von der Änderung der Hintergrundfarbe zur Fade ändern. Ich hoffe, das hilft:

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