Question

这里是来自 width 和 height 的简单图像 css 动画，但它在 width 和 height 变化时抖动/振动不平滑我错过了什么？我可以知道吗？

我希望这应该能顺利改变。

我的代码是：

.content {
  overflow: hidden;
  position: relative;
  width: 500px;
  height: 300px;
  border: 4px solid red;
  text-align : center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mainimg 
{
border: 3px solid black;
}


img {width:100%; height:100%; }


/*zoom-out-to-zoom-in keyframe**/

.zoom-out-to-zoom-in{
  animation: zoom-out-to-zoom-in linear 8s;
  animation-direction: alternate;  
  animation-iteration-count: 4;

}

@keyframes zoom-out-to-zoom-in{
0% {
  width: 40%;
  height: 40%;
  }

  5% {
   width: 60%;
  height: 60%;
  }

  100% {
   width: 90%;
  height: 90%;
  }
}

<div class="content">
      <div class="mainimg zoom-out-to-zoom-in">
    <img class="left-to-right" src="https://c.ndtvimg.com/2021-01/qt2601i8_pm-modi-davos_625x300_28_January_21.jpg">
</div></div>

Answer 1

问题与您将元素居中有关，因此每次更改大小都会产生抖动效果，因为您将触发居中。

改为尝试变换动画。应该会更好：

.content {
  overflow: hidden;
  position: relative;
  width: 500px;
  height: 300px;
  border: 4px solid red;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mainimg {
  border: 3px solid black;
}

img {
  width: 100%;
  height: 100%;
  display:block;
}


/*zoom-out-to-zoom-in keyframe**/

.zoom-out-to-zoom-in {
  animation: zoom-out-to-zoom-in linear 8s;
  animation-direction: alternate;
  animation-iteration-count: 4;
}

@keyframes zoom-out-to-zoom-in {
  0% {
    transform:perspective(100px) translate3d(0,0,-80px);
  }
  5% {
    transform:perspective(100px) translate3d(0,0,-40px);
  }
  100% {
    transform:perspective(100px) translate3d(0,0,-10px);
  }
}

<div class="content">
  <div class="mainimg zoom-out-to-zoom-in">
    <img class="left-to-right" src="https://c.ndtvimg.com/2021-01/qt2601i8_pm-modi-davos_625x300_28_January_21.jpg">
  </div>
</div>

Answer 2

其实很简单。您可以通过给它以下 CSS 规则来强制您的方形图像为矩形：

  100% {
  width: 400px;
  height: 250px;
  }

如果你做这样的事情：

  100% {
  width: 400px;
  height: 400px;
  }

你的形象不会那么晃动。当然，您必须根据容器大小调整大小。

基本上所有尺寸都必须有效。将 16:9 图像缩放为 4:3 格式时也是如此。如果您不通过将图像切割成正确的格式来调整图像，它会抖动。

将容器的高度增加到 500 像素有以下几点：

.content {
  overflow: hidden;
  position: relative;
  width: 500px;
  height: 500px;
  border: 4px solid red;
  text-align : center;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.mainimg 
{
border: 4px solid black;
}


img {width:100%; height:100%; image-rendering: pixelated; }


/*zoom-out-to-zoom-in keyframe**/

.zoom-out-to-zoom-in{
  animation: zoom-out-to-zoom-in linear 3s;
  animation-direction: alternate;  
  animation-iteration-count: 1;

}

@keyframes zoom-out-to-zoom-in{
0% {
  width: 100px;
  height: 100px;
  }

  5% {
  width: 200px;
  height: 200px;
  }
 
  100% {
  width: 400px;
  height: 400px;
  }
}

<div class="content">
      <div class="mainimg zoom-out-to-zoom-in">
    <img class="left-to-right" src="https://pbs.twimg.com/profile_images/3507963424/c335309ba957f38976b532d84149cb4b.jpeg">
</div></div>

Answer 3

您试图在拉伸图像的同时更改图像的纵横比。即使使用 Javascript，您的浏览器也无法使这种转换“顺利”。

您可以尝试使用 background-image 代替 cover。虽然一点也不完美，但可能会有一点改进，至少，您的图像不会变形。

.content {
  overflow: hidden;
  position: relative;
  width: 500px;
  height: 300px;
  border: 4px solid red;
  text-align : center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mainimg 
{
border: 4px solid black;
}
img {width:100%; height:100%; }


/*zoom-out-to-zoom-in keyframe**/

.zoom-out-to-zoom-in {
  animation: zoom-out-to-zoom-in linear 3s;
  animation-direction: alternate;  
  animation-iteration-count: 1;
  
  animation-fill-mode: forwards;
background-image:url(https://pbs.twimg.com/profile_images/3507963424/c335309ba957f38976b532d84149cb4b.jpeg);
background-size:cover;
}

@keyframes zoom-out-to-zoom-in{
0% {
  width: 100px;
  height: 100px;
  }

  5% {
  width: 200px;
  height: 200px;
  }

  100% {
  width: 400px;
  height: 250px;
  }
}

<div class="content">
      <div class="mainimg zoom-out-to-zoom-in">
   
</div></div>

CSS 动画不流畅，是在晃动

3 个答案: