Question

我想让飞机从一个点移动到另一个点。我希望飞机看起来像平稳过渡一样向上。 .png文件只是一张飞机的图片。

这是我的HTML：

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

这是我的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

工作正常。只需要先将其声明为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>

使用关键帧进行Css转换

1 个答案: