在HTML/CSS中使动画更平滑

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

img{
高度：60px；
填充物：5px；
-webkit动画：logofloat 1s轻松输入输出无限交替；
-moz动画：logofloat 1s轻松输入输出无限交替；
动画：logofloat 1s轻松输入输出无限交替；
}
@关键帧标记浮动{
从{
页边距顶部：0px；页边距顶部：5px；
}
到{
页边距顶部：5px；页边距顶部：10px；
}
}

以下是当前的情况：

---

动画有点起伏，我能做些什么使它更平滑吗？

使用

transform:translateY

而不是

margin

，这样动画将利用

GPU

并使用

将更改：transform

，浏览器将更改哪些属性

img{
高度：100px；
改变：转变；
动画：logofloat 1s轻松输入输出无限交替；
}
@关键帧标记浮动{
从{
变换：translateY（0）；
}
到{
变换：translateY（10px）；
}
}