I need a repeated flickering effect-CodePudding

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?

.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;
  }
}

<h1 >TE<span >X</span>T<span >T </span>Tex<span >T</span>

CodePudding user response：

I couldn't find the way to add timing function and flickering like your original one. So, I use JavaScript to listen animation end and then restart them again.

Restart CSS animation thanks to css-tricks.

You have to add one more CSS class to make it mark as running. I use running with anim. Here is full code.

window.onload = function() {
    let animationContainer = document.querySelector('.anim')
    
    const allAnimationElements = animationContainer.querySelectorAll('span');
    const totalAnimationElement = allAnimationElements.length;
    let count = 0;
    document.addEventListener('animationend', (e) => {
        let animationContainer = e.target.closest('.anim');
        if (animationContainer) {
            //console.log('animation end.');
            count  ;
            if (count >= totalAnimationElement) {
                //console.log('force re-start.');
                animationContainer.classList.remove('running');
                void animationContainer.offsetWidth;
                animationContainer.classList.add('running');
                count = 0;
            }
        }// endif; animationContainer
    });
};

.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.running span {
  animation: flicker 100ms linear;
  animation-iteration-count: 1;
}

.anim.running .delay1 {
  animation-delay: 0.4s;
}

.anim.running .delay2 {
  animation-delay: 1.1s;
}

.anim.running .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;
  }
}

<h1 >TE<span >X</span>T<span >T </span>Tex<span >T</span>

Be careful! This maybe slow down your web browser. It is not good choice to restart your flickering but it just work.