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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
      <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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX