Hi
Ich hab erst vor kurzen angefangen ein klein wenig zu programmieren, da es mir recht viel Spaß macht probier ich momentan viel rum.
Nun hab ich jedoch ein Problem, bei dem ich absolut nicht weiter komme:
Ich hab ein Bild welches normalerweise nach links schaut ( möchte jetzt nicht unbedingt erwähnen was auf dem Bild drauf ist, man kann sich jedoch vorstellen wie ein Mensch der in einer Richtung schaut).
Dieses Bild fängt etwas weiter Rechts auf der Webseite an, soll dann nach Links wandern, dort sich nach Rechts drehen ( 
dabei nicht bewegen ) und nachdem es sich gedreht hat wieder nach Rechts fahren und wenn es wieder am Ausgangspunkt angelangt ist wieder nach Links drehen ( in der Ausgangsposition ).
Dies soll unendlich oft wiederholt werden.
Mein Problem ist nun, dass zum Schluss beim wieder nach Rechts fahren es sich während der fahrt nochmal dreht was es ja erst tun soll nachdem es angekommen ist.
Meine Vermutung ist, dass vielleicht so ein transition Befehl da helfen könnte allerdings bekomme ich es nicht damit hin, daher wenn es geht bitte ohne ihn ( wenn sein muss ist natürlich auch ok )
Hoffentlich konnte ich mein Problem gut schildern bin recht schlecht darin etwas gut zu beschreiben tut mir echt leid 
Hier mein Code:
Html
<div class="ani">
<nav align="left"><img src="DTP.jpg" width="500px" height="250px"></nav>
</div>
CSS
#ani1{
width:100%;
height:10%;
float:left;
position:relative;
background:black;
}
.ani img{
background-color:black;
animation-name:Tiger;
animation-duration:10s;
animation-direction:normal;
animation-iteration-count:infinite;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
transition-property: transform;
transition-duration: 1s;
}
@keyframes Tiger{
0% { transform: translateX(900px);}
50% { transform: translateX(-100px);}
75% { transform: rotateY(180deg);}
100%{ transform: translateX(900px);}
}Danke euch allen schon einmal im Voraus 