因此，我正在为一个客户开发一个移动网站，并添加了一个CSS加载动画，当用户浏览页面或加载Ajax时会触发该动画。
动画在Chrome中运行良好，但是在IOS中，我发现触发导航后（通过window.location.href或仅单击锚标记），加载的动画立即冻结。这是在调用开始时发生的，而不是在页面加载后发生的，因此在相当长的时间内，css不会执行任何操作，并且站点似乎挂断了某些内容。我还要补充一点，当我刚进行ajax调用时，动画就可以工作。
同时，我在动画加载和实际导航之间设置了一个延迟，这对站点的外观和感觉有所帮助，但效果不佳。
有关为什么会发生这种情况的任何解决方案或想法？
答案 0 :(得分：0)
在触发导航后冻结动画似乎是Webkit浏览器的普遍问题。
请参见https://bugs.webkit.org/show_bug.cgi?id=16177
如果您可以通过Ajax / XHR发送请求，则有一种解决方法。然后动画将继续播放。您可以在收到后端服务的200 / ok响应后触发导航。
如果您要加载整个下一页并通过Javascript交换内容，则可能要注意浏览器历史记录API，即为交换的页面添加一个条目。
答案 1 :(得分：0)
显然，有一种解决方法适合您的情况：使用transform而不是所有其他属性。参见https://stackoverflow.com/a/53178319/647845