html - 纯css画线动画左下左

Question

我是用css transition画一条线，它从右到左运行或加载，然后向下，继续向左加载:

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

您可以按照我的代码段实现此效果。
我使用了 两个关键帧 和一个 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>