Javascript 不中断 CSS 动画

Question

我正在尝试使用 JavaScript 中断使 DIV 元素淡出的 CSS 动画。通过 CSS 淡入淡出的文本效果很好，但是，定时 JavaScript 函数不会在设定的时间间隔内“中断”淡入淡出。一段时间以来，我一直在摸不着头脑，想知道某些 CSS 动画是否不能被 JavaScript 中断/取消。非常感谢任何建议!

<style type="text/css">
#fadeMe {
    opacity:1.0;
    animation:fadeEffect 6s infinite;
    -webkit-animation:fadeEffect 6s infinite; /* Safari and Chrome */
}

@keyframes fadeEffect
{
    from { opacity: 1.0; }
    to { opacity: 0; }
}

@-webkit-keyframes fadeEffect /* Safari and Chrome */
{
    from { opacity: 1.0; }
    to { opacity: 0; }
}
</style>
<div id="fadeMe">
    <p> Fade this text </p>
</div>

<script type="text/javascript">
    setInterval(function(){interruptFade()},3000);
    function interruptFade() {
        var div = document.getElementById('fadeMe');
        div.style.opacity = "1.0";
    }
</script>

Answer 1

setInterval(函数(){ 中断淡入淡出()；}，3000)； 函数中断淡入淡出(){ var div = document.getElementById('fadeMe'); div.style.opacity += 0.1; }