基于计时器的纯CSS缩放动画？

Question

我知道在悬停按钮时我可以在CSS中进行缩放动画。

但我想知道我是否可以根据特定计时器制作缩放动画。 就像在0.5秒内缩放和缩小动画一样，每5秒钟回来一次。

类似于此网址https://www.laboutiquetrend.com/collections/produits/products/epilateur-corporel-2-0上的按钮（滚动一下以使其显示）

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

让我知道谢谢:)。

Answer 1

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

＆＃13;

＆＃13;

* {
  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)
  }
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;