我需要一个反复闪烁的效果

Question

我需要在我的页面中制作一个重复闪烁的文本元素。我该如何进行？这是我的代码的一部分： animation-iteration-count: infinite 不起作用，它是不断闪烁的。应该怎么写？

.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 class="anim">TE<span class="delay1">X</span>T<span class="delay2">T </span>Tex<span class="delay3">T</span>

Answer 1

我找不到像你原来那样添加定时功能和闪烁的方法。所以，我使用 JavaScript 来听动画结束，然后重新启动它们。

重新启动CSS动画感谢css-tricks。

您必须再添加一个 CSS class 才能将其标记为运行。我使用 running 和 anim。这是完整的代码。

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 class="anim running">TE<span class="delay1">X</span>T<span class="delay2">T </span>Tex<span class="delay3">T</span>

小心！这可能会降低您的网络浏览器的速度。重启闪烁不是一个好的选择，但它确实有效。

我需要一个反复闪烁的效果

I need a repeated flickering effect

html

css

css-animations