Transition Css avec les images-clés

Question

Je souhaite déplacer un plan d'un point à un autre. Je veux que l'avion ressemble à une transition en douceur. Le fichier .png est juste une image d'un avion.

Voici mon html:

<img id="fly" src="fly.png"> 

Voici mon css:

#fly { 
    animation: fly 7s linear infinite; 
} 
@keyframes fly { 
    0% {left: 0px; top: 100px; transform: rotate(0deg); } 
    100% {left: 900px; top: -30px; transform: rotate(10deg);} 
} 

Answer 1

fonctionne bien. Juste besoin de le déclarer comme position: absolute; d'abord afin que vos images clés d'animation ont un effet. J'ai changé #fly en <div> ici parce que je n'ai pas votre image mais le code est le même.

#fly { 
 
    position: absolute; 
 
    animation: fly 7s linear infinite; 
 
} 
 

 
@keyframes fly { 
 
    0% {left: 0px; top: 100px; transform: rotate(0deg); } 
 
    100% {left: 900px; top: -30px; transform: rotate(10deg);} 
 
}

<div id="fly">FLY</div>