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