CSS动画实现：元素移至红框后隐藏、另一元素显示并右移的方法

我来给你捋个清晰的实现方案，用HTML+CSS+JS就能搞定这个连贯的动画流程，核心是用CSS过渡（transition）处理平滑移动，再用JS精准控制动画的先后顺序～

• 第一步：让左侧元素平滑移动到红框位置，移动完成后隐藏它
• 第二步：显示右侧元素（初始设为隐藏），让它先出现在红框附近
• 第三步：让右侧元素从红框位置平滑移动到页面右侧

完整代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素移动动画演示</title>
    <style>
        /* 基础布局 */
        body {
            margin: 0;
            padding: 20px;
            position: relative;
            min-height: 100vh;
            box-sizing: border-box;
        }

        /* 左侧元素 */
        .left-element {
            width: 80px;
            height: 80px;
            background: #4285F4;
            border-radius: 4px;
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            /* 过渡动画：移动和透明度变化 */
            transition: all 0.8s ease;
        }

        /* 红框占位（用来标记目标位置） */
        .red-box {
            width: 80px;
            height: 80px;
            border: 2px dashed #EA4335;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 4px;
        }

        /* 右侧元素（初始隐藏） */
        .right-element {
            width: 80px;
            height: 80px;
            background: #34A853;
            border-radius: 4px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            /* 初始隐藏 */
            opacity: 0;
            visibility: hidden;
            /* 过渡动画：移动和透明度变化 */
            transition: all 0.8s ease;
        }

        /* 左侧元素移动到红框的状态 */
        .left-element.move-to-redbox {
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            visibility: hidden;
        }

        /* 右侧元素显示的状态 */
        .right-element.show {
            opacity: 1;
            visibility: visible;
        }

        /* 右侧元素移动到页面右侧的状态 */
        .right-element.move-to-right {
            left: calc(100% - 100px);
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="left-element"></div>
    <div class="red-box"></div>
    <div class="right-element"></div>

    <script>
        const leftEl = document.querySelector('.left-element');
        const rightEl = document.querySelector('.right-element');

        // 监听左侧元素的过渡结束事件，确保动画完成后再执行下一步
        leftEl.addEventListener('transitionend', function() {
            // 第一步完成：左侧元素隐藏，现在显示右侧元素
            rightEl.classList.add('show');
            
            // 延迟一小会儿（让用户看到右侧元素在红框位置），再触发移动到右侧的动画
            setTimeout(() => {
                rightEl.classList.add('move-to-right');
            }, 500);
        });

        // 页面加载后，启动第一步动画：左侧元素移动到红框
        window.addEventListener('load', function() {
            setTimeout(() => {
                leftEl.classList.add('move-to-redbox');
            }, 500); // 延迟启动，方便看到初始状态
        });
    </script>
</body>
</html>

关键细节说明 #

• CSS过渡（transition）：给元素的left、transform、opacity等属性添加过渡，让移动和显示/隐藏的过程平滑自然，你可以调整0.8s这个时间来控制动画快慢。
• 状态切换：通过给元素添加/移除CSS类来触发不同的动画状态，比直接修改样式更易维护。
• 动画顺序控制：用transitionend事件监听左侧元素的动画完成，确保第一步结束后再执行第二步，避免动画重叠；用setTimeout给右侧元素在红框位置留一点展示时间，完全符合你的需求。
• 定位技巧：用absolute定位来自由控制元素位置，transform: translate(-50%, -50%)用来让元素精准居中到红框位置，calc(100% - 100px)用来让右侧元素停在页面右侧（留出20px内边距）。

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