키 프레임을 사용한 CSS 전환

Question

비행기를 한 지점에서 다른 지점으로 이동하려고합니다. 비행기가 부드럽게 전환하면서 위로 올라가는 것처럼 보이게하고 싶습니다. .png 파일은 비행기 사진입니다.

#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

작업을 잘 :

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

여기 내 CSS입니다 :

여기 내 HTML입니다. position: absolute;으로 선언해야 애니메이션 키 프레임이 효과가 있습니다. 귀하의 이미지가 없기 때문에 #fly을 <div>으로 변경했습니다. 코드는 동일합니다.

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