Animation expansion of div causes shift in adjacent divs

Question 1

I want to draw a rectangle:

<!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>

This almost works but as you can see, the right expanding div with animation line2 pushes down both lower divs.

I tried to solve this by playing around with float and clear without success.

Question 2

Thanks to @Paulie_D’s comment I was able to solve it. You need to set position: absolute for the elements:

<!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>

Leave a Comment Cancel reply