Анимация рисования линий слева, вниз, слева с чистым CSS

Question

Я использую переход CSS для рисования линии, запуска или загрузки справа налево, а затем вниз и продолжения загрузки влево:

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

это мой 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>	

мой css, кажется, не разбивает строку для загрузки вниз и влево, как решить проблему?

Answer 1

Вы можете использовать градиент для рисования линий, и вам понадобится только один ключевой кадр:

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

То, что вы можете легко масштабировать до любого количества строк:

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

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

@keyframes increase {
    0% {       
        width: 0px;
    }
    100% {
        width: 500px;
    } 
}
@keyframes increaseA {
    0% {       
        height: 0px;
        opacity: 1;
    }
    100% {
        height: 500px;
        opacity: 1;
    } 
}
@keyframes increaseB {
    0% {       
        width: 0px;
        opacity: 1;
    }
    100% {
        width: 500px;
        opacity: 1;
    } 
}





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

Answer 3

Вы можете добиться этого эффекта согласно моему фрагменту.Я использовал Two keyframes и свойство after для добавления нижней строки

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