在用户浏览页面后启动CSS3转换？
我的主页顶部有一个CSS3动画，一旦页面加载就会启动。 问题是如果用户在新选项卡中打开该页面，但即使没有查看该页面，动画也不会立即查看。
有没有办法让动画只有在用户查看该页面后才能启动？
有点像如果你打开另一个隐藏标签中的YouTube视频，它将不会自动播放，直到你打开该标签。 而且，如果您在新标签中打开笔，它将不会启动，直到您查看该标签为止
您需要使用可见性API：https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API?redirectlocale=zh-CN&redirectslug=DOM%2FUsing_the_Page_Visibility_API
特别是，您需要document.hidden属性和visibilitychange事件。 当document.hidden属性为false时，可以使用它们来动态更改类。
如上所述，您可以检查窗口关注的时间，即用户点击（但未查看）它。 你将如何实现它？
无论你选择一个id / class /标签。 它的样式，动画也。 一旦该窗口关注，您可以将id / class应用于元素或使用标记/ id / class创建新元素。 添加完类后，您可以取消onfocus函数，也可以通过为此创建的变量进行检查。
例：
window.onfocus=function(){
window.onfocus=null;
document.getElementById("toBeAnimated").className="animatable";
}#toBeAnimated{
font-size:25px;
}
.animatable{
transition: background-color 250ms linear;
background-color:black;
transition: color 250ms linear;
color:white;
}<div id="toBeAnimated">Focus on the snippet to animate me!</div>