让 HTML/CSS 中的动画更加流畅

Question

我有一个冰山的标志，我试图通过增加和减少顶部边距来模拟浮动动画。我为此使用以下 css：

img {

  height: 60px;

  padding: 5px;

  -webkit-animation: logofloat 1s ease-in-out infinite alternate;

  -moz-animation: logofloat 1s ease-in-out infinite alternate;

  animation: logofloat 1s ease-in-out infinite alternate;

}

@keyframes logofloat {

from {

  margin-top: 0px; margin-top: 5px;

}

to {

  margin-top: 5px;  margin-top: 10px;

}

}

这是目前的样子：https://gyazo.com/bbd8991a3e9a42148bb7677b85d0db3d

动画有点断断续续，有什么办法可以让它更流畅吗？

Answer 1

使用transform: translateY而不是margin，因此动画将利用 并GPU使用will-change: transform，以便浏览器 提前知道哪些属性将要更改。img {  height: 100px;  will-change: transform;  animation: logofloat 1s ease-in-out infinite alternate;}@keyframes logofloat {   from {       transform: translateY(0);   }   to {       transform: translateY(10px);   }}<img src="https://i.stack.imgur.com/UJ3pb.jpg" />最后，除非您需要支持非常旧的浏览器版本，否则不再需要供应商前缀。