css3脉冲效果延时

Question

你好，我有一个在 css3 中脉冲的按钮(效果很好)我想要它做的是每 12 秒脉冲一次...我该怎么做？

.pulse {
        animation-name: pulse_animation;
        animation-duration: 10000ms;
        transform-origin:70% 70%;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    @keyframes pulse_animation {
        0% { transform: scale(1); }
        30% { transform: scale(1); }
        40% { transform: scale(1.08); }
        50% { transform: scale(1); }
        60% { transform: scale(1); }
        70% { transform: scale(1.05); }
        80% { transform: scale(1); }
        100% { transform: scale(1); }
    }

Answer 1

我已将持续时间设置为 3 秒，以便您确切了解它是如何工作的。您可以自行自由调整持续时间。只需将 3s 更改为 12s。

https://jsfiddle.net/bL164jj8/

.pulse {
  animation-name: pulse_animation;
  animation-duration: 3s;
  transform-origin: 70% 70%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  height: 100px;
  width: 100px;
  background-color: lightblue;
}
@keyframes pulse_animation {
  0% {
    transform: scale(1);
  }
  8% {
    transform: scale(1.01);
  }
  16% {
    transform: scale(1.02);
  }
  24% {
    transform: scale(1.03);
  }
  32% {
    transform: scale(1.04);
  }
  40% {
    transform: scale(1.05);
  }
  50% {
    transform: scale(1.06);
  }
  58% {
    transform: scale(1.05);
  }
  66% {
    transform: scale(1.04);
  }
  74% {
    transform: scale(1.03);
  }
  82% {
    transform: scale(1.02);
  }
  90% {
    transform: scale(1.01);
  }
  100% {
    transform: scale(1);
  }
}

<div class='pulse'>

</div>