Line drawing animation left, down, lef with pure css

  • A+
Category:Languages

I'm using css transition to drawing a line, it run or loading from right to left, and then down, and continue to load to left:

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

this is my css:

  .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 left*/    30% {         width: 500px;    }    /*load down*/    60% {     border-radius: 3px;         width: 1000px;    }    /*load to left*/    100% {     border-radius: 3px;     width: 1500px;    }   }
<div class="transitionLine"></div> 

my css seem not break line to load down and left, how to fix the problem ?

 


You can achieve this effect as per my snippet.
I have used Two keyframes and an after property to add 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 {      /*load to left*/     30% {         width: 200px;         height: 0px;     }      31% {         width: 200px;         height: 1px;     }      /*load down*/     60% {         height: 100px;         width: 200px;     }      /*load to left*/     100% {         height: 100px;         width: 200px;     } }  @keyframes increase2 {     60% {         height: 0px;         width: 0px;     }      /*load to left*/     100% {         height: 0px;         width: 200px;     } }
<div class="transitionLine"></div>

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: