在Chrome中使用animate.css时出现全屏视频问题

Question

我有一个页面,其中包含使用视频标记的视频.此外,我的页面使用animate.css为我的元素添加一些动画.问题是当我在animate.css中使用样式时,我的视频无法正确显示全屏.这是我的页面示例:

<div id="wrapper">
    <div id="page-wrapper" class="gray-bg dashbard-1">
        <h2 id="sv_title">Here is some text for illustration</h2>

        <div class="animated fadeInRight">
            <video src="http://www.w3schools.com/html/mov_bbb.mp4" controls=""></video>
        </div>
    </div>
</div>

https://jsfiddle.net/p4nmt637/

此外,这个问题似乎只发生在chrome,我在FireFox和Safari中测试过,我没有这个问题.

Answer 1

这似乎是一个Chrome错误.问题是由animation-fill-mode设置的问题引起的both.这使得动画在视频父容器上保持活动状态,这似乎与全屏视频混乱.

解决方法

通过将其更改回默认值none,我们修复了全屏问题.在此示例中,动画填充模式随.custom类更改.

例

这个jsfiddle有一个工作的例子.

/*Uncomment the class to fix*/  

/*
.custom {
   animation-fill-mode: none;
}
*/

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.css" rel="stylesheet" />
<h2 id="sv_title">This is the problem, the bottom video is being layered over the top when this is made fullscreen. Uncomment the custom class to see it fix itself.</h2>
<div class="animated fadeInRight custom">
  <video src="http://www.w3schools.com/html/mov_bbb.mp4" controls></video>
</div>

<div class="animated fadeInRight">
  <video src="http://www.w3schools.com/html/mov_bbb.mp4" autoplay muted></video>
</div>