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>

css3脉冲效应延迟

1 个答案: