Creating a left, down, left line drawing animation using only CSS

Question

Creating a left, down, left line drawing animation using only CSS

Utilizing CSS transitions to animate a line drawing from right to left, then down, and finally continuing to load to the left:

point 1------point 2 
               |
               |
               |
               ---------point 3

Here is the CSS code I am using:

.transitionLine {
  height:0px;
  width:1px;
  border:10px solid #ef4e4e;
  
  -webkit-animation: increase 3s;
  -moz-animation:    increase 3s; 
  -o-animation:      increase 3s; 
  animation:         increase 3s; 
  animation-fill-mode: forwards;
}

@keyframes increase {
/* Load to the left */
30% {
width: 500px;
}
/* Load down */
60% {
border-radius: 3px;
width: 1000px;
}
/* Load to the left */
100% {
border-radius: 3px;
width: 1500px;
}
}

<div class="transitionLine"></div>

My CSS does not break the line to load down and left, how can I fix this issue?

html css css-transitions

Answer 1

Answer №1

To achieve this particular effect, you can refer to the snippet provided below.
The implementation involves the use of two keyframes along with an after property to create a bottom line.

.transitionLine {
    height: 0px;
    width: 1px;
    border-top: 10px solid #ef4e4e;
    border-right: 10px solid #ef4e4e;
    position: relative;
    -webkit-animation: increase 3s;
    -moz-animation: increase 3s;
    -o-animation: increase 3s;
    animation: increase 3s;
    animation-fill-mode: forwards;
}

.transitionLine:after {
    content: '';
    display: block;
    height: 0px;
    width: 1px;
    border-top: 10px solid #ef4e4e;
    border-right: 10px solid #ef4e4e;
    -webkit-animation: increase2 3s;
    -moz-animation: increase2 3s;
    -o-animation: increase2 3s;
    animation: increase2 3s;
    animation-fill-mode: forwards;
    position: absolute;
    left: 100%;
    bottom: 0;
}

@keyframes increase {
    30% {
        width: 200px;
        height: 0px;
    }
    31% {
        width: 200px;
        height: 1px;
    }
    60% {
        height: 100px;
        width: 200px;
    }
    100% {
        height: 100px;
        width: 200px;
    }
}

@keyframes increase2 {
    60% {
        height: 0px;
        width: 0px;
    }
    100% {
        height: 0px;
        width: 200px;
    }
}

<div class="transitionLine"></div>

Answer 2

To achieve this particular effect, you can refer to the snippet provided below.
The implementation involves the use of two keyframes along with an after property to create a bottom line.

.transitionLine {
    height: 0px;
    width: 1px;
    border-top: 10px solid #ef4e4e;
    border-right: 10px solid #ef4e4e;
    position: relative;
    -webkit-animation: increase 3s;
    -moz-animation: increase 3s;
    -o-animation: increase 3s;
    animation: increase 3s;
    animation-fill-mode: forwards;
}

.transitionLine:after {
    content: '';
    display: block;
    height: 0px;
    width: 1px;
    border-top: 10px solid #ef4e4e;
    border-right: 10px solid #ef4e4e;
    -webkit-animation: increase2 3s;
    -moz-animation: increase2 3s;
    -o-animation: increase2 3s;
    animation: increase2 3s;
    animation-fill-mode: forwards;
    position: absolute;
    left: 100%;
    bottom: 0;
}

@keyframes increase {
    30% {
        width: 200px;
        height: 0px;
    }
    31% {
        width: 200px;
        height: 1px;
    }
    60% {
        height: 100px;
        width: 200px;
    }
    100% {
        height: 100px;
        width: 200px;
    }
}

@keyframes increase2 {
    60% {
        height: 0px;
        width: 0px;
    }
    100% {
        height: 0px;
        width: 200px;
    }
}

<div class="transitionLine"></div>

Answer 3

Answer №2

You can create stunning line animations using gradients with just one keyframe:

.transitionLine {
  width:300px;
  height:100px;
  background-image:
   linear-gradient(#ef4e4e,#ef4e4e),
   linear-gradient(#ef4e4e,#ef4e4e),
   linear-gradient(#ef4e4e,#ef4e4e);
  background-size:
    0% 5px,
    5px 0%,
    0% 5px;
  background-position:
    top left,
    top center,
    150px 100%;
  background-repeat:no-repeat;
  animation: increase 3s;
  animation-fill-mode: forwards;
}

@keyframes increase {
  30% {
    background-size:
    50% 5px,
    5px 0%,
    0% 5px;
  }
  /*load down*/
  60% {
    background-size:
    50% 5px,
    5px 100%,
    0% 5px;
  }
  /*load to left*/
  100% {
    background-size:
    50% 5px,
    5px 100%,
    50% 5px;
  }
}

<div class="transitionLine"></div>

You have the flexibility to scale this effect to include any number of lines:

.transitionLine {
  width:300px;
  height:100px;
  background-image:
   linear-gradient(#ef4e4e,#ef4e4e),
   linear-gradient(#ef4e4e,#ef4e4e),
   linear-gradient(#ef4e4e,#ef4e4e),
   linear-gradient(#ef4e4e,#ef4e4e),
   linear-gradient(#ef4e4e,#ef4e4e);
  background-size:
    5px 0%,
    0% 5px,
    5px 0%,
    0% 5px,
    5px 0%;
  background-position:
    bottom left,
    top left,
    top center,
    150px 100%,
    right bottom;
  background-repeat:no-repeat;
  animation: increase 3s;
  animation-fill-mode: forwards;
}

@keyframes increase {
  20% {
    background-size:
    5px 100%,
    0% 5px,
    5px 0%,
    0% 5px,
    5px 0%;
  }
  40% {
    background-size:
    5px 100%,
    50% 5px,
    5px 0%,
    0% 5px,
    5px 0%;
  }
  60% {
    background-size:
    5px 100%,
    50% 5px,
    5px 100%,
    0% 5px,
    5px 0%;
  }
  80% {
    background-size:
    5px 100%,
    50% 5px,
    5px 100%,
    50% 5px,
    5px 0%;
  }
  100% {
    background-size:
    5px 100%,
    50% 5px,
    5px 100%,
    50% 5px,
    5px 100%;
  }
}

<div class="transitionLine"></div>

Answer 4

You can create stunning line animations using gradients with just one keyframe:

.transitionLine {
  width:300px;
  height:100px;
  background-image:
   linear-gradient(#ef4e4e,#ef4e4e),
   linear-gradient(#ef4e4e,#ef4e4e),
   linear-gradient(#ef4e4e,#ef4e4e);
  background-size:
    0% 5px,
    5px 0%,
    0% 5px;
  background-position:
    top left,
    top center,
    150px 100%;
  background-repeat:no-repeat;
  animation: increase 3s;
  animation-fill-mode: forwards;
}

@keyframes increase {
  30% {
    background-size:
    50% 5px,
    5px 0%,
    0% 5px;
  }
  /*load down*/
  60% {
    background-size:
    50% 5px,
    5px 100%,
    0% 5px;
  }
  /*load to left*/
  100% {
    background-size:
    50% 5px,
    5px 100%,
    50% 5px;
  }
}

<div class="transitionLine"></div>

You have the flexibility to scale this effect to include any number of lines:

.transitionLine {
  width:300px;
  height:100px;
  background-image:
   linear-gradient(#ef4e4e,#ef4e4e),
   linear-gradient(#ef4e4e,#ef4e4e),
   linear-gradient(#ef4e4e,#ef4e4e),
   linear-gradient(#ef4e4e,#ef4e4e),
   linear-gradient(#ef4e4e,#ef4e4e);
  background-size:
    5px 0%,
    0% 5px,
    5px 0%,
    0% 5px,
    5px 0%;
  background-position:
    bottom left,
    top left,
    top center,
    150px 100%,
    right bottom;
  background-repeat:no-repeat;
  animation: increase 3s;
  animation-fill-mode: forwards;
}

@keyframes increase {
  20% {
    background-size:
    5px 100%,
    0% 5px,
    5px 0%,
    0% 5px,
    5px 0%;
  }
  40% {
    background-size:
    5px 100%,
    50% 5px,
    5px 0%,
    0% 5px,
    5px 0%;
  }
  60% {
    background-size:
    5px 100%,
    50% 5px,
    5px 100%,
    0% 5px,
    5px 0%;
  }
  80% {
    background-size:
    5px 100%,
    50% 5px,
    5px 100%,
    50% 5px,
    5px 0%;
  }
  100% {
    background-size:
    5px 100%,
    50% 5px,
    5px 100%,
    50% 5px,
    5px 100%;
  }
}

<div class="transitionLine"></div>

Answer 5

Answer №3

.dynamicLine {
    height:0px;
    width:1px;
    border:10px solid #ef4e4e;
    -webkit-animation: growHeight 1s;
    -moz-animation:    growHeight 1s; 
    -o-animation:      growHeight 1s; 
    animation:         growHeight 1s; 
    animation-fill-mode: forwards;
}
.dynamicLine:before{
    height: 0px;
    content: " ";
    width: 0px;
    border: 10px solid #ef4e4e;
    -webkit-animation: growHeightA 1s;
    -moz-animation: growHeightA 1s;
    -o-animation: growHeightA 1s;
    animation: growHeightA 1s;
    animation-fill-mode: forwards;
    margin: -10px 0 0 510px;
    animation-delay: 1s;
    display: inline-block;
    opacity: 0;
}
.dynamicLine:after{
    height: 0px;
    content: " ";
    width: 0px;
    border: 10px solid #ef4e4e;
    -webkit-animation: growWidthB 1s;
    -moz-animation: growWidthB 1s;
    -o-animation: growWidthB 1s;
    animation: growWidthB 1s;
    animation-fill-mode: forwards;
    margin: 0px 0 0 510px;
    animation-delay: 2s;
    display: inline-block;
    opacity: 0;
}

@keyframes growHeight {
    0% {       
        width: 0px;
    }
    100% {
        width: 500px;
    } 
}
@keyframes growHeightA {
    0% {       
        height: 0px;
        opacity: 1;
    }
    100% {
        height: 500px;
        opacity: 1;
    } 
}
@keyframes growWidthB {
    0% {       
        width: 0px;
        opacity: 1;
    }
    100% {
        width: 500px;
        opacity: 1;
    } 
}





<div class="dynamicLine"></div>

Answer 6

.dynamicLine {
    height:0px;
    width:1px;
    border:10px solid #ef4e4e;
    -webkit-animation: growHeight 1s;
    -moz-animation:    growHeight 1s; 
    -o-animation:      growHeight 1s; 
    animation:         growHeight 1s; 
    animation-fill-mode: forwards;
}
.dynamicLine:before{
    height: 0px;
    content: " ";
    width: 0px;
    border: 10px solid #ef4e4e;
    -webkit-animation: growHeightA 1s;
    -moz-animation: growHeightA 1s;
    -o-animation: growHeightA 1s;
    animation: growHeightA 1s;
    animation-fill-mode: forwards;
    margin: -10px 0 0 510px;
    animation-delay: 1s;
    display: inline-block;
    opacity: 0;
}
.dynamicLine:after{
    height: 0px;
    content: " ";
    width: 0px;
    border: 10px solid #ef4e4e;
    -webkit-animation: growWidthB 1s;
    -moz-animation: growWidthB 1s;
    -o-animation: growWidthB 1s;
    animation: growWidthB 1s;
    animation-fill-mode: forwards;
    margin: 0px 0 0 510px;
    animation-delay: 2s;
    display: inline-block;
    opacity: 0;
}

@keyframes growHeight {
    0% {       
        width: 0px;
    }
    100% {
        width: 500px;
    } 
}
@keyframes growHeightA {
    0% {       
        height: 0px;
        opacity: 1;
    }
    100% {
        height: 500px;
        opacity: 1;
    } 
}
@keyframes growWidthB {
    0% {       
        width: 0px;
        opacity: 1;
    }
    100% {
        width: 500px;
        opacity: 1;
    } 
}





<div class="dynamicLine"></div>

Creating a left, down, left line drawing animation using only CSS

Answer №1

Answer №2

Answer №3

Similar questions

Different strategies for displaying a singular pie chart on multiple pages

The Safari browser is having trouble rendering the website's CSS and HTML properly

Styling the first child element within a list using the li tag

html - Removing excess space following the footer

Words fail to display

What's the Best Way to Add a Border to My Two-Column Form?

Trouble with CSS transitions not functioning while altering React state

An unusual html element

Is there a way to customize the checkout page using JavaScript?

Tips for making a div with a single triangular side using Reactjs

Absolute positioning causes a 100% height container to be displaced from the IE viewport

Troubleshooting: Issue with multiple file input elements on page - only the first input is functional and not displaying preview images

Using Visual Studio Code to envelop your HTML code is a great way

Is there an advantage to pre-rendering a circle on an HTML5 canvas for improved performance?

Unable to choose multiple options within a selection field

Using jQuery to highlight the navigation menu when a specific div scrolls into view

Beautiful ExpressionChangedAfterItHasBeenCheckedError

Ways to adjust dimensions depending on zoom level or screen size

What is the process for inserting or removing a row with Javascript?

Customizing default elements in A-frame: Tips and Tricks