CSS字体放大+Y轴旋转组合动画仅Safari运行异常问题求助

问题原因 #

该异常是Safari浏览器的已知渲染bug：当同一个元素同时应用多个独立的@keyframes动画时，对transform复合属性的解析会出现异常，无法和其他动画的属性正常共存，哪怕多个动画修改的是不同属性也会触发该问题。你观察到的translate偏移失效就是该bug导致的。 #

解决方法 #

方案1：拆分动画载体元素（最稳定，全浏览器兼容）

将居中、旋转逻辑和字体放大逻辑拆分到父子不同元素上，从根源上避免同一元素多动画的冲突：

1. 修改HTML结构，新增外层包裹容器

<html>
    <head>
        <title>Text Animation</title>
        <link href="./style.css" rel="stylesheet">
    </head>
    <body>
        <!-- 新增外层容器负责旋转、居中 -->
        <div id="myTextWrapper">
            <div id="myText">Hello World!</div>
        </div>

        <div id="decoration" style="width:10px; height:10px; background-color:red; position: fixed; top:50%; left:50%; transform: translate(-50%, -50%);"></div>
    </body>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        window.onload = function() { setTimeout(initiateAnimation, 200) }

        function initiateAnimation() {
            let rotate = "rotateText 2s linear 0s 1 normal none running"
            let grow = "growText 2s linear 0s 1 normal forwards running"
            // 两个动画分别加在不同元素上
            $("#myTextWrapper").css("animation", rotate)
            $("#myText").css("animation", grow)
        }
    </script>
</html>

2. 修改CSS，拆分两个元素的样式和动画

/* 外层容器动画：旋转 */
@keyframes rotateText {
    from { transform: rotateY(0deg) translate(-50%, -50%); }
    to { transform: rotateY(360deg) translate(-50%, -50%); }
}
/* 兼容低版本Safari可加前缀 */
@-webkit-keyframes rotateText {
    from { -webkit-transform: rotateY(0deg) translate(-50%, -50%); }
    to { -webkit-transform: rotateY(360deg) translate(-50%, -50%); }
}

#myTextWrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform-origin: left top;
    -webkit-transform-origin: left top;
    border: 2px solid red;
}

/* 内层文本动画：字体放大 */
@keyframes growText {
    from { font-size: 0px; }
    to { font-size: 100px; }
}

#myText {
    white-space: nowrap;
    overflow: hidden;
    font-size: 0px;
}

方案2：合并动画到同一个关键帧（无需修改HTML结构）

把字体大小变化和transform变化都写在同一个@keyframes规则中，不使用两个独立动画，避免Safari的多动画解析冲突：

1. 修改CSS，合并关键帧

@keyframes textCombinedAnim {
    from {
        font-size: 0px;
        transform: rotateY(0deg) translate(-50%, -50%);
    }
    to {
        font-size: 100px;
        transform: rotateY(360deg) translate(-50%, -50%);
    }
}
@-webkit-keyframes textCombinedAnim {
    from {
        font-size: 0px;
        -webkit-transform: rotateY(0deg) translate(-50%, -50%);
    }
    to {
        font-size: 100px;
        -webkit-transform: rotateY(360deg) translate(-50%, -50%);
    }
}

#myText {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform-origin: left top;
    -webkit-transform-origin: left top;
    white-space: nowrap;
    overflow: hidden;
    font-size: 0px;
    border: 2px solid red;
}

2. 修改JS，仅应用单个合并后的动画

function initiateAnimation() {
    let combinedAnim = "textCombinedAnim 2s linear 0s 1 normal forwards running"
    let myText = jQuery("#myText")
    myText.css("animation", combinedAnim)
    // 兼容低版本Safari可加前缀
    myText.css("-webkit-animation", combinedAnim)
}

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