title: I need a repeated flickering effect
body: <p>I need to make a repeated flickering text element in my page. How should I proceed? This is a part of my code:
  animation-iteration-count: infinite doesn't work, it's a constant flickering. How should I write it?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.anim {
    font-weight: 400;
    font-size: 10.3em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #bd00ff;
    text-shadow: 0 0 5px #bd00ff, 0 0 10px #bd00ff, 0 0 20px #bd00ff, 0 0 40px #bd00ff, 0 0 80px #bd00ff, 0 0 90px #bd00ff, 0 0 100px #bd00ff, 0 0 150px #bd00ff;
  }
  
  .anim span {
    animation: flicker 100ms linear;
  }
  
  .anim .delay1 {
    animation-delay: 0.4s;
  }
  
  .anim .delay2 {
    animation-delay: 1.1s;
  }
  
  .anim .delay3 {
    animation-delay: 1.5s;
  }
  
  @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;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1 class="anim"&gt;TE&lt;span class="delay1"&gt;X&lt;/span&gt;T&lt;span class="delay2"&gt;T &lt;/span&gt;Tex&lt;span class="delay3"&gt;T&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>