Animation

Hey! Ich habe nun eine Animation auf meiner Webseite eingebaut. Nun ist meine Frage: Die Aninmation kommt, wenn die Webseite neu geladen/geöffnet wird. Jedoch soll die Animation des Bildes erst kommen, wenn ich runterscrolle und bei diesem animierten Inhalt bin. Wie kann ich das machen?
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<html> <head> <script src="/js_webseite/jquery.js"></script> <style> *{ margin-left:0px; padding:0px; } body{ height:1500px; overflow:scroll; } #inhalt{ display:none; position:fixed; top:0px; left:0px; background:red; height:80px; width:80px; animation:start 5s linear forwards infinite; text-align:center; font-weight:900; } span{ font-size:30px; } @keyframes start{ 0%,100%{ position:fixed; left:100vw; } 50%{ position:fixed; left:0; } } </style> </head> <body> <div id="inhalt"><span id="mitte"></span> <div id="box" > </div> </div> <script> function someAction(e) { var text = document.getElementById('inhalt'); if (e.deltaY > 0) { $('#inhalt').fadeIn(); $('#mitte').html('Run'); }else if (e.deltaY < 0) { $('#mitte').html('Stop'); $('#inhalt').fadeOut(); } } window.addEventListener('mousewheel', someAction, false); </script> </body> </html>