CSS-Übergang mit Keyframes

Question

Ich möchte ein Flugzeug von einem Punkt zum anderen bewegen. Ich möchte, dass das Flugzeug so aussieht, als würde es mit einem sanften Übergang nach oben gehen. Die .png-Datei ist nur ein Bild eines Flugzeugs.

Hier ist mein html:

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

Hier ist meine 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

Arbeiten in Ordnung. Sie müssen es zuerst als position: absolute; deklarieren, damit Ihre Animations-Keyframes etwas bewirken. Ich habe #fly in ein <div> hier geändert, weil ich dein Bild nicht habe, aber der Code ist der selbe.

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