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;
  }

问题在codepen上的例子：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

有一些关于大小和时间（帧）的东西。然后animate跳回到0以避免你应该使用animation-direction: alternate-reverse但它在这段代码中没有颤抖。

您可以在w3schools

上了解详情

＆＃13;

.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;
  }

＆＃13;

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

＆＃13;

动画时颤抖的背景图像

2 个答案: