css - 使用 css 放大动画效果无法正常工作

Question

我已经添加了用于动画放大的 css 代码，它工作正常，但问题是我没有编写用于缩小的代码，但图像同时显示了放大和缩小。

<div class="slotholder"><img src="http://www.server.com/fhdfsmile/wp-content/uploads/2018/11/slider01.jpg"></div>
.slotholder {
webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-animation: zoomin 0s ease-in infinite;
animation: zoomin 30s ease-in infinite;

 }
  @-webkit-keyframes zoomin {
  0% {transform: scale(1);}
  50% {transform: scale(1.5);}
  100% {transform: scale(1);}
   }
  @keyframes zoomin {
  0% {transform: scale(1);}
 50% {transform: scale(1.5);}
 100% {transform: scale(1);}
  } 

我已经编写了用于放大的 css，但它也将用于缩小。我不想要缩小选项，只需要缩放图像。

Answer 1

变化

• 将 infinite 替换为 forwards

• @keyframes 是渐进的，所以当它是:

  @keyframes zoomin {
    0% {
      transform: scale(1);
    }
    50% {
      /* Changed to 1.25 */
      transform: scale(1.5);
    }
    100% {
      /* Changed to 1.5 */
      transform: scale(1);
    }
  }
  

  开始时 0% 是正常大小 scale(1)，然后到一半 50% 更大 scale( 1.5)，但在 100% 结束时它缩小到正常大小 scale(1)。

• transform-origin: top left已添加以定位图像以避免裁剪。

---

演示

.slotholder {
  animation: zoomin 10s ease-in forwards;
  transform-origin: top left;
}

@keyframes zoomin {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1.5);
  }
}

<div class="slotholder"><img src="https://smileaz.com/wp-content/uploads/sites/45/2018/07/types-of-dentures.jpg" width='300'></div>