Ways to expand the border horizontally using CSS animation from the middle

Question

Ways to expand the border horizontally using CSS animation from the middle

Currently, I am experimenting with CSS animation and I have a query regarding creating a vertical line that automatically grows in length when the page is loaded. I am interested in making the vertical line expand from the center in both upward and downward directions to reach a specific height. Unfortunately, my current code only allows for increasing its length from top to bottom. Below is my existing code snippet:

.vertical-line {
margin-left: 100px;
background: red;
width: 8px;
border-radius: 4px;
animation: grow 4s forwards;
}

@keyframes grow {
0% {
height: 10px;
}
100% {
height: 100px;
}
}

<!DOCTYPE html>
<html>
<head>
<title>Creating Vertical borders using animation/javascript</title>
</head>
<body>
<div class="vertical-line"></div>
</body>
</html>

javascript jquery html css css-animations

Answer 1

Answer №1

Your code has a flaw in that you are only increasing the height without considering both sides. To achieve growth on both sides while increasing height, you need to move the element towards the opposite side.
For example, if you increase the height by 100px, you should move in the opposite direction by 50px.

CSS:

#cool
{
height:10px;
width:10px;
border-radius:4px;
margin-left:10%;
background-color:#431;
margin-top:20%;
animation:grow 3s forwards;
position:relative;
}

@keyframes grow
{
0% {
    height: 0px;
    top:0;
}
100%{
    height: 200px;
    top:-100px;
}
}

</style>

HTML:

<div id=cool>

</div>

</body>

For a height of 100px, move the element -50px from the top. This is done to show growth on both sides. If moved -100px, it would only grow from the bottom.
I hope this explanation helps.

Answer 2

Your code has a flaw in that you are only increasing the height without considering both sides. To achieve growth on both sides while increasing height, you need to move the element towards the opposite side.
For example, if you increase the height by 100px, you should move in the opposite direction by 50px.

CSS:

#cool
{
height:10px;
width:10px;
border-radius:4px;
margin-left:10%;
background-color:#431;
margin-top:20%;
animation:grow 3s forwards;
position:relative;
}

@keyframes grow
{
0% {
    height: 0px;
    top:0;
}
100%{
    height: 200px;
    top:-100px;
}
}

</style>

HTML:

<div id=cool>

</div>

</body>

For a height of 100px, move the element -50px from the top. This is done to show growth on both sides. If moved -100px, it would only grow from the bottom.
I hope this explanation helps.

Answer 3

Answer №2

To achieve this effect, one method you could use is to start the line at the center of the viewport and then extend it upwards and downwards.

.myLine {
  position: absolute;
  left: 50vw;
  top: 50vh;
  width: 1px;
  height: 1px;
}

By adding a class called extended through JavaScript, you can adjust the position and height of the line, giving the illusion that it is extending vertically from the center.

.extended {
    top: 0vh;
    bottom: 100vh;
    height: 100%;

    transition: all 3s ease;
}

In this implementation using JavaScript, a short delay is set before applying the class to animate the extension.

var el = document.querySelector('.myLine');

setTimeout(function() {
 el.classList.add('extended');
}, 300);

For a visual demonstration, check out my example on codepen.

Answer 4

To achieve this effect, one method you could use is to start the line at the center of the viewport and then extend it upwards and downwards.

.myLine {
  position: absolute;
  left: 50vw;
  top: 50vh;
  width: 1px;
  height: 1px;
}

By adding a class called extended through JavaScript, you can adjust the position and height of the line, giving the illusion that it is extending vertically from the center.

.extended {
    top: 0vh;
    bottom: 100vh;
    height: 100%;

    transition: all 3s ease;
}

In this implementation using JavaScript, a short delay is set before applying the class to animate the extension.

var el = document.querySelector('.myLine');

setTimeout(function() {
 el.classList.add('extended');
}, 300);

For a visual demonstration, check out my example on codepen.

Answer 5

Answer №3

Give this a try:

<div class="vertical-line"></div>
<style>
    .vertical-line {
        position: absolute;
        top: 0;
        border: 5px solid blue;
        width: 12px;
        border-radius: 6px;
        animation: expand 4s infinite alternate;
    }

    @keyframes expand {
        0% {
            width: 0px;
            height: 0px;
        }
        100% {
            width: 25px;
            height: 120%;
        }
    }
</style>

Answer 6

Give this a try:

<div class="vertical-line"></div>
<style>
    .vertical-line {
        position: absolute;
        top: 0;
        border: 5px solid blue;
        width: 12px;
        border-radius: 6px;
        animation: expand 4s infinite alternate;
    }

    @keyframes expand {
        0% {
            width: 0px;
            height: 0px;
        }
        100% {
            width: 25px;
            height: 120%;
        }
    }
</style>

Ways to expand the border horizontally using CSS animation from the middle

Answer №1

Answer №2

Answer №3

Similar questions

What is the method for locating all anchor tags "In General" within the inner HTML of a div using XPath?

What is the best way to locate the final text node within the <p> element?

Why does Vue only change a specific array element without updating the DOM?

hold on for the arrays to be populated with data from the ajax calls

Tips for incorporating user access control logic into a lazy-loaded Angular Monorepo application without embedding the logic in the main application

Submitting an AJAX form redirects to a different page instead of keeping the user on the current page

The overall outcome determined by the score in JavaScript

"JQuery AJAX loop is not properly iterating through values and only returning

Utilizing CSS to incorporate a background image into HTML code

Having trouble dynamically assigning the ng-model attribute

Sending information to a webpage in real-time using AJAX

Error message: IndexError: list index out of range while attempting to trigger a click event using selenium

difficulty with parsing JSON in jQuery when referencing an external file containing the same data

What is the best way to send information to a component using Props in Vue2?

Enhancing Security with Subresource Integrity in Angular-Cli

Navigating to a different directory using Node.js and ExpressJS route mapping

The ASP.NET MVC controller did not receive the JSON object properly due to some missing properties

Sorting tables with jQuery UI sortable() and rowspan功能

React Native: Once a user has successfully logged in, I would like the app to automatically direct them to the "Home" screen

The request to http://localhost:8080 from http//:localhost:3000 has been restricted due to CORS policy blocking access. This is due to the absence of the 'Access-Control-Allow-Origin' header in the