Html 我怎样才能只做div'；激活&x27；当已单击另一个按钮时？

我试图弄明白，我如何才能使一个弹出窗口只显示一次按钮被点击。我在计时器上有一个弹出div，但我只希望计时器在点击这个按钮后启动。有人对我如何做到这一点有什么想法吗

我在顶部有一个按钮，打开这个盒子，里面有一个自动播放的HTML5视频；我想让带有弹出窗口的div只在点击该按钮（以便播放视频）后启动计时器，确定何时显示

这对任何人都有意义吗？非常感谢

某些属性不是“可传递的”-例如，可见性只有两种状态-可见或隐藏，没有中间比例。因此，动画将不会产生所需的效果

通过改为使用“不透明度”，可以确保清晰的过渡，因为“不透明度”属性可以增加

使用一点JavaScript，您可以听到按钮上的点击

let button=document.querySelector（“按钮”）；
按钮。addEventListener（“单击”，函数（e）{
设timer=document.querySelector（“.timer”）；
timer.classList.toggle（“活动”）；
});
.timer{
不透明度：0；
}
.timer.active{
动画：cssAnimation 1s向前；
}
@关键帧cssAnimation{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
开始体验
看看这个奇特的弹出窗口

<button class="modal-open" >Begin Experience</button>
<div class="modal-box">
  <video class="fs-video" preload="auto" >
    <source  class="fs-video"  src="videos/scene1_option1a.mp4"  type="video/mp4" > 
    </video>    
</div>

<!--This is the popup code -->
    <div class="timer">
        <div class="modal">
        <p class="message">Look at this fancy pop-up</p>
            <div class="options">
                    <a href="test.html">
                <button class="btn">Yes</button>
                    </a>
                    <a href="test.html">
                <button class="btn">No</button>
                    </a>            
            </div>
        </div>      
    </div>  
<!--end of popup code -->


.timer{
    animation: cssAnimation 0s 5s forwards;
    visibility: hidden;
}

@keyframes cssAnimation {
  to   { visibility: visible; }
}