动画时背景图像颤抖

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(x.x) 代替。查看这支笔了解更多详情。

@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>

动画时背景图像颤抖

background image quivering when animated

html

css

animation

background-image

keyframe