CODEWITHSUNDEEP
javascripthtmlcsstransformtransition
Galdino
Galdino

Reputation: 1

Css transition with keyframes

I want to make a plane move from one point to the other. I want the plane to look like it's going upwards with a smooth transition. The .png file is just a picture of a plane.

Here is my html: 

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

Here is my 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);}
}

Upvotes: 0

Views: 238

Answers (1)

Will
Will

Reputation: 4155

Working fine. Just need to declare it as position: absolute; first so your animation keyframes have some effect. I changed #fly into a <div> here because I don't have your image but the code is the same.

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

Upvotes: 1

Related Questions