2

I'm making a text animation for my friend's website and I'm trying to make a flicker effect, it works, however, it plays once, and I want it to play, then stop, then start again. THe make I've tried only messes it up. Does anyone know a solution?

(my animation code)

.neon span {
  animation: flicker 900ms linear 2;
  }
.neon .delay1 {
  animation-delay: 1.4s;
  }
.neon .delay2 {
  animation-delay: 2.0s;
  }
@keyframes flicker
  {
    0% { opacity: 0; }
   10% { opacity: 1; }
   20% { opacity: 0; }
   40% { opacity: 1; }
   50% { opacity: 0; }
   60% { opacity: 1; }
   80% { opacity: 0; }
  100% { opacity: 1; }
  }

In the animation: flicker 900ms linear 2; line of code I've tried putting infinte but when I do that it flickers supers fast with no break. I want it to flicker kinda slow then stop, then flicker again.

Mister Jojo
  • 20,093
  • 6
  • 21
  • 40
notmrcj
  • 23
  • 4

1 Answers1

1

animation-delay only specifies the delay time before the animation first starts.

animation-iteration-count which (for example) you might specify in your animation shorthand as infinite doesn't include that in between interations.

So, you have to 'fake' it by manually building that into your @keyframes.

.neon span {
  animation: flicker 900ms linear 1.4s infinite;
 }

@keyframes flicker {
  0% { opacity: 0; }
  10% { opacity: 1; }
  20% { opacity: 0; }
  40% { opacity: 1; }
  50% { opacity: 0; }
  60% { opacity: 1; } /* 'fake' delay */
  80% { opacity: 1; } /* 'fake' delay */
  100% { opacity: 1; } /* 'fake' delay */
}

In the example above, it will wait 1.4 seconds upon initial page load, then start to flicker between opacity: 0 and opacity: 1 for 60% of your 900ms duration, then stay opacity: 1 for the other 40%.

How fast it flickers will depend on your animation-duration (e.g. 900ms) divided by the number of selectors (steps) over the course of your @keyframes. So, if you increase/decrease the duration, or decrease/increase the number of keyframe selectors (e.g. 0%, 1%, 2%, 3% ... 100%) it will flicker slower/faster.

Then it will restart immediately after and repeat infinitely.

Discussed here:

CSS animation delay in repeating

CSS animation delay between iterations

limco
  • 1,310
  • 1
  • 15
  • 24
  • This works perfectly the only problem is it doesn't look great, is there a way you think for it to flicker a random number of times, then delay, and then repeat? When I do this method is just flickers the same amount of times indefinitely and it doesn't look great. If you could help me with this that'd be great. – notmrcj Feb 18 '23 at 01:10
  • 1
    Play around with the `animation-timing-function` which your example currently sets to `linear`. https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function – limco Feb 18 '23 at 02:05
  • 1
    The `steps()`, `jump-start`, `jump-end` values might be able to achieve what you need. I've never used it that way before, but play around with it. – limco Feb 18 '23 at 02:06