CSS动画异常：移除指定元素后动画跳过起始阶段

问题描述 #

实现了一个CSS动画，让元素从容器中心移动至四角。四个子元素全部存在时动画运行正常，但移除带有remove this文本的div1后，剩余元素的动画会跳过从中心到四角的前半段。尝试过在load或DOMContentLoaded事件触发动画、添加animation-delay: 1000ms（不符合需求）、延长动画时长至10s（可正常运行）均无法解决问题，该问题出现在Windows 10系统的Opera、Chrome、Edge浏览器中。

复现代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Animation</title>
    <style>
        body {
            margin: 0px;
        }

        .container {
            width: 100%;
            height: 800px;
            background-color: grey;
            position: relative;
        }

        .div1 {
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            position: absolute;
            animation: right-bottom 1s;
            animation-fill-mode: forwards;
        }

        .div2 {
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            position: absolute;
            animation: right-top 1s;
            animation-fill-mode: forwards;
        }

        .div3 {
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            position: absolute;
            animation: left-top 1s;
            animation-fill-mode: forwards;
        }

        .div4 {
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            position: absolute;
            animation: left-bottom 1s;
            animation-fill-mode: forwards;
        }

        @keyframes right-top {
            from {
                right: 50%;
                top: 50%;
            }

            to {
                right: 0;
                top: 0%;
            }
        }

        @keyframes right-bottom {
            from {
                right: 50%;
                bottom: 50%;
            }

            to {
                right: 0%;
                bottom: 0%;
            }
        }

        @keyframes left-top {
            from {
                top: 50%;
                left: 50%;
            }

            to {
                top: 0%;
                left: 0%;
            }
        }

        @keyframes left-bottom {
            from {
                left: 50%;
                bottom: 50%;
            }

            to {
                left: 0%;
                bottom: 0%;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 移除该元素后动画异常 -->
        <!-- <div class="div1">remove this</div> -->
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
    </div>
</body>

</html>

问题原因 #

这是Chromium系浏览器的渲染优化机制导致的：

• 当div1存在时，其内部文本会触发浏览器的初始布局计算，使得所有元素的初始位置（@keyframes中from定义的中心位置）被正确渲染，动画可以完整执行。
• 移除div1后，剩余的空元素（div2-div4）没有触发初始布局的必要元素，浏览器会直接优化到动画的to状态，跳过了从中心到四角的过渡阶段。

解决方案 #

给每个动画元素显式设置初始位置（即@keyframes中from的状态），让浏览器在初始布局时就确定元素的中心位置，确保动画从正确起点开始。

修改后的CSS代码 #

/* 保留原有基础样式，修改以下元素的样式 */
.div2 {
    width: 100px;
    height: 100px;
    background-color: cornflowerblue;
    position: absolute;
    /* 显式设置初始位置 */
    right: 50%;
    top: 50%;
    animation: right-top 1s forwards;
}

.div3 {
    width: 100px;
    height: 100px;
    background-color: cornflowerblue;
    position: absolute;
    /* 显式设置初始位置 */
    top: 50%;
    left: 50%;
    animation: left-top 1s forwards;
}

.div4 {
    width: 100px;
    height: 100px;
    background-color: cornflowerblue;
    position: absolute;
    /* 显式设置初始位置 */
    left: 50%;
    bottom: 50%;
    animation: left-bottom 1s forwards;
}

/* 若div1保留，同样需要添加初始位置 */
.div1 {
    width: 100px;
    height: 100px;
    background-color: cornflowerblue;
    position: absolute;
    /* 显式设置初始位置 */
    right: 50%;
    bottom: 50%;
    animation: right-bottom 1s forwards;
}

优化方案（减少重复代码） #

可以创建通用类统一设置基础样式，再为每个元素单独指定初始位置和动画：

.box {
    width: 100px;
    height: 100px;
    background-color: cornflowerblue;
    position: absolute;
}

.div1 {
    right: 50%;
    bottom: 50%;
    animation: right-bottom 1s forwards;
}

.div2 {
    right: 50%;
    top: 50%;
    animation: right-top 1s forwards;
}

.div3 {
    top: 50%;
    left: 50%;
    animation: left-top 1s forwards;
}

.div4 {
    left: 50%;
    bottom: 50%;
    animation: left-bottom 1s forwards;
}

修改后，无论移除多少元素，动画都会从容器中心完整过渡到对应四角，不会出现跳过前半段的问题。

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