javascript - 浏览器选项卡处于活动状态时如何重新启动此 CSS 动画

Question

我想在浏览器选项卡处于活动状态时重新启动这个 css 动画，所以如何重新启动这个 css 动画。我的目的是当我们进入这个动画选项卡时，.r1 DIV box每次动画。就像这个例子：当我们处于活动标签位置时，这里的泡泡会重新启动。检查这个：https ://codepen.io/repzeroworld/pen/EmjLGP
https://codepen.io/Bes7weB/pen/vmOMpx 这个例子与我的问题没有关系，但我只是告诉你一个例子而已。

我的代码是：

.r1 {
  background-color: lightgrey;
  width: 300px;
  height: 50px;
  border: 6px solid green;
  padding: 10px;
  text-align: center;
}

.r1 {
    animation: bounceInRight 1400ms both
}

@keyframes bounceInRight {

    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
        opacity: 0;
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        transform: translate3d(10px, 0, 0);
    }

    90% {
        transform: translate3d(-5px, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

<div class="r1">This text is the content of the box..</div>

提前致谢。

标签： javascripthtmljquerycss

Answer 1

你可以使用Javascript。特别

document.addEventListener("visibilitychange", () => {

    if(document.visibilityState === "visible" ){
    //restart animation
     }
    else{
    //don't restart 
    }

})

更多关于可见性变化的信息在这里https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event