我正在为移动网站制作一个 css3 加载动画。加载器使用以下 HTML/CSS 工作得很好:
HTML:
<div class="loader"></div>
CSS:
.loader {
background-color: rgba(0,0,0,0);
border: 6px solid rgba(0,0,0,0.75);
opacity: 0.5;
border-top: 6px solid rgba(0,0,0,0);
border-left: 6px solid rgba(0,0,0,0);
border-radius: 60px;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
width: 60px;
height: 60px;
margin: 0 auto;
-moz-animation: spin 1s infinite linear;
-webkit-animation: spin 1s infinite linear;
}
@-moz-keyframes spin {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
@-webkit-keyframes spin {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
但是,在mobil safari上观看动画时,滚动/触摸页面时动画会暂停。有什么方法可以让动画在用户滚动页面时继续播放?
谢谢!
最佳答案
我不认为这是目前可能的。您必须执行自己的滚动实现(或使用框架)以避免这种副作用。我推测,但欢迎更多的技术见解 - 这是因为 native 滚动和 CSS 动画都在争夺 GPU 控制 - 他们都不能拥有它
关于css - -webkit-动画在移动浏览器上滚动时停止,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13423140/