div 的动画扩展导致相邻 div 的偏移答案

【问题标题】：Animation expansion of div causes shift in adjacent divsdiv 的动画扩展导致相邻 div 的偏移
【发布时间】：2021-07-30 23:37:23
【问题描述】：

我要画一个矩形：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: #042d6b;
        }
        #line1, #line2, #line3, #line4 {
            height: 2px;
            width: 2px;
            background: #a2facf;
            position: relative;
            border: red solid;
        }
        #line1 {
            animation: sketchRight 3s forwards;
        }
        #line2 {
            left: 198px;
            animation: sketchBottom 3s forwards;
        }
        #line3 {
            animation: sketchBottom 3s forwards;
        }
        #line4 {
            /*top: 198px*/
            animation: sketchRight 3s forwards;
        }
        @keyframes sketchRight {
            100% { width: 200px; height: 2px}
        }
        @keyframes sketchBottom {
            100% { width: 2px; height: 200px}
        }
    </style>
</head>
<body>
    <div id="line1"></div>
    <div id="line2"></div>
    <div id="line3"></div>
    <div id="line4"></div>
</body>
</html>

这几乎可以工作，但正如您所见，带有动画line2 的右侧扩展 div 会向下推两个较低的 div。

我试图通过使用float 和clear 来解决这个问题，但没有成功。

【问题讨论】：

您可能必须绝对定位元素以保持它们的尊重位置。

标签： javascript html css animation

【解决方案1】：

感谢@Paulie_D 的评论，我能够解决它。您需要为元素设置position: absolute：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: #042d6b;
        }
        #line1, #line2, #line3, #line4 {
            height: 2px;
            width: 2px;
            background: #a2facf;
            /*position: relative;*/
            position: absolute;
            /*border: red solid;*/
        }
        #line1 {
            animation: sketchRight 3s forwards;
        }
        #line2 {
            left: 206px;
            animation: sketchBottom 3s forwards;
        }
        #line3 {
            animation: sketchBottom 3s forwards;
        }
        #line4 {
            top: 206px;
            animation: sketchRight 3s forwards;
        }
        @keyframes sketchRight {
            100% { width: 200px; height: 2px}
        }
        @keyframes sketchBottom {
            100% { width: 2px; height: 200px}
        }
    </style>
</head>
<body>
    <div id="line1"></div>
    <div id="line2"></div>
    <div id="line3"></div>
    <div id="line4"></div>
</body>
</html>

【讨论】：