用户切换到选项卡后显示动画答案

【问题标题】：Show animation after user switches to the tab用户切换到选项卡后显示动画
【发布时间】：2013-05-13 01:58:11
【问题描述】：

如果用户在后台打开新标签页，Css 动画会在他/她切换到页面之前播放。用户选择标签后有什么方法可以显示 css-animation 吗？

【问题讨论】：

是的，当用户切换到您的标签时。

标签： javascript css html css-animations

【解决方案1】：

您可以尝试使用 Page Visibility API - http://www.html5rocks.com/en/tutorials/pagevisibility/intro/ 不过，旧版浏览器可能不支持

【讨论】：

简单的例子将不胜感激。
较新的浏览器需要它，因为 css 动画也不起作用。
在文章的 VisibilityChange 事件部分有一个简单的例子来说明如何使用 changeVisibility 事件

【解决方案2】：

我觉得这对于纯 CSS 是不可能的，因为 CSS 只是负责显示网页。我认为使用 onblur 和 onfocus 事件的 Javascript 是可能的。看看http://www.thefutureoftheweb.com/blog/detect-browser-window-focus，它有信息和演示（在 Chrome 中可以工作）。

您的里程数可能会有所不同，因为我在了解用户是否正在积极查看页面时会发现一些安全问题。我没有在所有浏览器中测试过这个

【讨论】：

thefutureoftheweb.com/demo/… - 在这种情况下，演示是一个很棒的 jsFiddle。只需访问该页面，然后单击文本框，然后单击您的地址栏。