Сделайте анимацию более плавной в HTML / CSS

Question

У меня есть go айсберга, с которым я пытаюсь смоделировать плавающую анимацию, увеличивая и уменьшая верхнее поле. Для этого я использую следующее 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" />

Наконец, префиксы поставщиков больше не нужны, если вам не требуется поддержка действительно старых версий браузера.