Animation interval

[stychu]

Hi, I have a hard time figuring how to make animate-ping to be happening in 30 second intervals instead of 1 second. It's too intrusive so we want to ping every 30 seconds once and after another 30 seconds again. Can someone help me with this ???

[wongjn]

With the built-in ping animation, it's duration is set as 1 second. In it's @keyframes, it has:

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

Which implies that the actual pulse animation is between 0%—75% and the pause is 75%—100%. Thus, we can see deduce that the pulse animation duration is $1s × 0.75 = 0.75s$. Thus, to adjust the times between pulses, we'd adjust the stationary percentage and total duration time to match.

Since we know that the ping duration is 0.75s and we want to pause 30s between, the total duration would be $0.75s + 30s = 30.75s$. To calculate the percentage duration of the pulse for the keyframes expression, we'd express it as a percentage ratio: $0.75s ÷ 30s = 0.025 × 100\% = 2.5\%$.

Thus putting it all together: https://play.tailwindcss.com/ycgEYTRD1I?file=css

[stychu]

Whoaaa. Nice explanation! Thank you very much 💪