css - 基于定时器的纯CSS缩放动画？

Question

我知道我可以在 CSS 中制作缩放动画，例如悬停按钮时。

但我想知道是否可以制作基于特定计时器的缩放动画。就像一个在 0.5 秒内短暂放大和缩小的动画，每 5 秒返回一次。

类似于此 URL 上的按钮 https://www.laboutiquetrend.com/collections/produits/products/epilateur-corporel-2-0 (稍微滚动一下使其出现)

同样，如果这只是 CSS，那将会有所帮助，因为我在主题元素上应用了自定义 CSS。

让我知道谢谢:)

Answer 1

我做了一些修改，现在是纯 CSS，但是有点差。

* {
  margin: 0;
  padding: 0;
}

div {
  background-color: #ccc333;
  width: 300px;
  height: 90px;
  margin: 20px auto;
  animation-name: pulse;
  /*animation-fill-mode: both;*/
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  15% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  30% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05)
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  15% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  30% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05)
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

<div></div>