CSS3绘制边框动画方向

Question

我有一个简单的盒子，上面有画边框动画。每个框都应该以不同的方向绘制框，但是我在控制绘制线的方向时遇到问题。

这是我的jsFiddle。

和代码：

    $(document).ready(function() {
    	$(function($, win) {
    	  $.fn.inViewport = function(cb) {
    	     return this.each(function(i,el){
    	       function visPx(){
    	         var H = $(this).height(),
    	             r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
    	         return cb.call(el, Math.max(0, t>0? H-t : (b<H?b:H)));  
    	       } visPx();
    	       $(win).on("resize scroll", visPx);
    	     });
    	  };
    	}(jQuery, window));
    
    	$(".js-fade-in-left").inViewport(function(px){
    	    if(px) $(this).addClass("o-fade-in-up") ;
    	});
    
    	$(".js-fade-in-right").inViewport(function(px){
    	    if(px) $(this).addClass("o-fade-in-up") ;
    	});
    
    	$(".js-fade-in-down").inViewport(function(px){
    	    if(px) $(this).addClass("o-fade-in-up") ;
    	});
    
    	$(".js-fade-in-up").inViewport(function(px){
    	    if(px) $(this).addClass("o-fade-in-up") ;
    	});
    
    	$(".js-fade-in").inViewport(function(px){
    	    if(px) $(this).addClass("o-fade-in") ;
    	});
    
    	$(".panel-box").inViewport(function(px){
    	    if(px) $(this).addClass("active") ;
    	});
    
    	
    	
    });

    body {
      background:#000000;
      color:white;
    }
    
    
    
    .o-rel {
      position:relative;
    }
    
    .panel-wrapper {
    	background-size:cover;
    	padding:120px 0;
    }
    .panel-box {
    	position:absolute;
    	top:50%;
    	transform:translateY(-50%);
    	border:1px solid white;
    	padding:5% 12%;
    	width:60%;
    	right:-1px;
    	border:0;
    	background:none;
    	z-index:10;
    }
    
    .panel-box::before,
    .panel-box::after {
    		box-sizing: inherit;
      		content: '';
      		position: absolute;
      		border: 1px solid transparent;
    	  	width: 0;
    	  	height: 0;
    	}
    
    .panel-box::before {
    		top: 0;
    	  	right: 0;
    	}
    .panel-box::after {
    		left: 0;
      		bottom: 0;
      		
    	}
    
    .panel-box.active::before {
    			width: 100%;
      			height: 100%;
      			border-top-color: white;
      			transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
    		}
    .panel-box.active::after {
    	  		width: 100%;
      			height: 100%;
      			border-left-color:  white;
      			border-bottom-color: white;
      			transition: border-color 0s ease-out 0.5s, height 0.25s ease-out 0.75s, width 0.25s ease-out 0.5s ;
    		}
    	
    
    
    .panel-box-left {
    	left:-11px;
    	right:auto;
    }
    .panel-box-left::before {
    	  	top: 0;
    	  	right:0;
    	}
    .panel-box-left::after {
    		
      		bottom: 0;
      		left:0;
    	}
    
    .panel-box-left.active::before {
    			width: 100%;
      			height: 100%;
      			border-top-color: white;
      			border-right-color: white;
      			transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
    		}
    	.panel-box-left.active::after {
    	  		width: 100%;
      			height: 100%;
      			
      			border-bottom-color: white;
      			border-left-color: white;
      			transition: border-color 0s ease-out 0.5s, height 0.25s ease-out 0.75s, width 0.25s ease-out 0.5s ;
    		}
    
    .js-fade-in-left {
    	opacity: 0;
    	transform: translate(-20px, 0px); 
      	transition: all 0.5s ease-out 0s;
    }
    
    .js-fade-in-right {
    	opacity: 0;
    	transform: translate(20px, 0px); 
      	transition: all 0.5s ease-out 0s;
    }
    
    .js-fade-in-down {
    	opacity: 0;
    	transform: translate(0px, -100px); 
      	transition: all 0.5s ease-out 0s;
    }
    
    
    .js-fade-in-up {
    	opacity: 0;
    	transform: translate(0px, 20px); 
      	transition: all 0.7s ease-out 0s;
    }
    
    .js-fade-in {
    	opacity: 0;
    	transition: all 0.5s ease-out 0s;
    }
    
    .o-fade-in-up {
      opacity: 1;
      transform: translate(0px, 0px); 
    }
    
    .o-fade-in {
      opacity: 1;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="o-rel panel-wrapper">
      <div class="panel-box">
        <div class="js-fade-in-right">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in interdum lectus, non auctor diam. Sed maximus mi a quam vestibulum, quis iaculis justo gravida. Morbi sollicitudin augue et quam accumsan commodo. Suspendisse eget dignissim sapien. Cras a eros ac risus rhoncus rhoncus. Curabitur gravida tempor nulla. Aenean id ante eget sapien feugiat varius eget sed velit. Donec eleifend ultrices dui et accumsan. Nam dapibus rhoncus odio nec interdum. Aliquam erat volutpat. Praesent ullamcorper mattis elit.
    
        </div>
      </div>
    </div>
    
    <div class="o-rel panel-wrapper">
    <div class="panel-box panel-box-left">
    <div class="js-fade-in-left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in interdum lectus, non auctor diam. Sed maximus mi a quam vestibulum, quis iaculis justo gravida. Morbi sollicitudin augue et quam accumsan commodo. Suspendisse eget dignissim sapien. Cras a eros ac risus rhoncus rhoncus. Curabitur gravida tempor nulla. Aenean id ante eget sapien feugiat varius eget sed velit. Donec eleifend ultrices dui et accumsan. Nam dapibus rhoncus odio nec interdum. Aliquam erat volutpat. Praesent ullamcorper mattis elit.
    
    </div>
    </div>
    </div>

我想动画的顶部/第一个框

1. 顶部边界线从右到左动画
2. 左边界线动画从上到下
3. 从左到右的底部边框线动画
4. 右边界线无需显示为偏离屏幕的位置。

我想让底部/第二个框动画化：

1. 顶部边界线从左到右动画
2. 右边界线从上到下动画
3. 底部从右到左动画
4. 左边框线无需显示为与屏幕的偏移量。

如何控制边框动画的方向以实现此目的？