Make Animations Smoother in HTML/CSS - html

Question

I have a logo of an iceberg, which I am trying to simulate a floating animation with by increasing and decreasing the top margin. I am using the following css for this:
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;
}
}
Here is what that currently looks like: https://gyazo.com/bbd8991a3e9a42148bb7677b85d0db3d
The animation is a bit choppy, is there anything that I can do to make it smoother?

Answer 1

Use transform: translateY instead of margin, so the animation will take benefit of the GPU and use will-change: transform so the browser knows in advance what properties are going to change.
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" />
Finally, vendor prefixes are no longer necessary unless you need to support really old browser versions.