小编Ha *_*iet的帖子

线条绘制动画左,下,lef与纯css

我正在使用css过渡来绘制一条线,它从右到左运行或加载,然后向下,并继续加载到左边:

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

Run Code Online (Sandbox Code Playgroud)

这是我的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;
			}
		}

Run Code Online (Sandbox Code Playgroud)