Safari中通过代码实现的CSS动画无法启动问题求助

嘿，这个Safari的动画兼容坑我之前踩过！咱们来一步步搞定它：

问题根源分析 #

Safari对动态修改CSS动画的处理逻辑和Chrome/Firefox不太一样：

• 用innerHTML注入<style>标签时，Safari可能不会正确解析其中的@keyframes规则
• 动态添加包含动画的类名后，Safari有时不会主动触发重绘来启动动画

解决方案一：替换动态注入关键帧的方式 #

不要用innerHTML来插入样式，而是直接创建<style>元素并添加到<head>，用textContent写入关键帧代码（Safari对textContent的解析更可靠）：

// 替代原来的$("#animazione").html(...)写法
const scrollStyle = document.createElement('style');
scrollStyle.textContent = `
@-webkit-keyframes scroll {
  0% { top: 100%; }
  100% { top: -170%; }
}
@keyframes scroll {
  0% { top: 100%; }
  100% { top: -170%; }
}`;
document.head.appendChild(scrollStyle);

这里同时添加了-webkit-前缀，兼容旧版Safari，新版Safari也能正常识别标准写法。

解决方案二：强制触发重绘以启动动画 #

当你通过.addClass("start")添加动画类后，Safari可能没有立即重新计算元素样式，需要手动触发一次重绘：

$("#titlecontent").addClass("start");
// 触发重绘，让Safari识别动画
document.getElementById('titlecontent').offsetHeight; // 读取offsetHeight会强制浏览器重绘

额外注意事项 #

• 确保你的#titlecontent元素在添加动画类时已经处于可见状态（没有display: none或visibility: hidden），否则Safari不会启动动画
• 动画时长150s很长，测试时可以先缩短时长（比如10s）来快速验证效果

试试这两个方案，应该能解决Safari里的动画失效问题！

内容的提问来源于stack exchange，提问作者Taxidriver