让 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" />

最后，除非您需要支持非常旧的浏览器版本，否则不再需要供应商前缀。