I am experimenting with creating a floating animation for my iceberg logo by adjusting the top margin. Below is the CSS code I have implemented:
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;
}
to {
margin-top: 10px;
}
}
You can see the current result here: https://gyazo.com/bbd8991a3e9a42148bb7677b85d0db3d
The animation appears a bit choppy to me. Are there any suggestions on how I can make it smoother?