Фоновое изображение дрожит при анимации

Question

Я попробовал немного анимации, когда наткнулся на небольшую проблему: когда я пытаюсь анимировать div, у которого изображение является фоном, упомянутое изображение кажется дрожащим, особенно когда дело доходит до увеличения или уменьшения div из центра. Есть ли способ предотвратить это? Или просто более простой способ оживить это? Большое спасибо.

HTML

<div class = 'button'>
  <div class = 'background'></div>
</div>

CSS

.button {
  border : 5px solid black;
  border-radius : 50%;
  height : 150px;
  width : 150px;
  animation : bigger 2s ease-in-out 0s infinite;

}
.background{
  height : 100%;
  width : 100%;
  background : url('https://image.flaticon.com/icons/svg/69/69434.svg') no-repeat;
  background-size : 90%;
  background-position : center;

}
@keyframes bigger {
  0% {
    height : 150px;
    width : 150px;
  }
  100%{
    margin-left : -5px;
    margin-top : -5px;
    height : 160px;
    width : 160px;
  }

пример задачи на коде ручки: https://codepen.io/pen/

Answer 1

Я думаю, что это из-за количества кадров, которые браузеры отображают вещи. Если вы измените время, он работает нормально. Попробуйте вместо этого использовать transform: scale(xx). Проверьте эту ручку для более подробной информации.

@keyframes bigger {
  0% {
    transform: scale(1)
  }
  100%{
    transform: scale(1.1)
  }
}

https://codepen.io/pen/

Answer 2

Есть кое-что о размерах и сроках (кадрах). затем анимация возвращается к 0, чтобы избежать использования animation-direction: alternate-reverse но это не дрожит, как месиво в этом коде.

Вы можете узнать больше о w3schools

.button {
  width: 150px;
    height: 150px;
    position: relative;
    animation-iteration-count: infinite;
  
  border : 5px solid black;
  border-radius : 50%;
  animation : example 1s ease-in-out 0s infinite alternate-reverse;
 
}
.background{
  height : 100%;
  width : 100%;
  background : url('https://image.flaticon.com/icons/svg/69/69434.svg') no-repeat;
  background-size : 90%;
  background-position : center;

}
@keyframes example {
  0% {
    margin-left : 0;
    margin-top : 0;
    height : 150px;
    width : 150px;
  }
  100%{
    margin-left : -5px;
    margin-top : -5px;
    height : 170px;
    width : 170px;
  }

<div class = 'button'>
  <div class = 'background'></div>
</div>