ライン　線　アニメーション　ボックス　改造

<p class="about_p box_anime">
      <span class="box__line"></span>
    <span class="box__line"></span>
    <span class="box__line"></span>
    <span class="box__line"></span>
    
    <span class="dbold">会社名・店名で検索されるだけで十分ですか？</span><br>
    訪問ユーザーはあなたの店名や会社名・サービス内容を知らないことを前提とします。<br>

FULLウェブデザインのホームページ制作は<span class="marker_orange">キーワードを決めて、検索エンジン対策（SEO対策）をして</span>制作します。<br>
<span class="dbold">検索順位に効く運営方法もご伝達いたします。</span><br></p>

        <script>
        
        $(window).on('scroll',function(){
  $(".box_anime").each(function(){
    let position = $(this).offset().top;
    let scroll = $(window).scrollTop();
    let windowHeight = $(window).height();
    if (scroll > position - windowHeight + 180){
      $(this).addClass('active');
    }
  });
});
        
    </script>

//線アニメーション

//横は長いから　これ
.transition5 {transition: all 5s ease;
     -webkit-transition: all 5s ease; 
    -moz-transition: all 5s ease;
    -o-transition: all 5s ease;}

//縦は短いからこれ
.transition3-1{transition: all 3s ease;
     -webkit-transition: all 3s ease; 
    -moz-transition: all 3s ease;
    -o-transition: all 3s ease;}

.box_anime {
//  width: 200px;
//  height: 200px;
      //display: block;
    
  margin: 0 auto;
  position: relative;
 overflow: hidden;
}
.box__line {
  position: absolute;
    
    
 
}
//横
.box__line:nth-child(1),
.box__line:nth-child(3) {
  width: 100%;
  height: 2px;
   .transition5;
}

//縦
.box__line:nth-child(2),
.box__line:nth-child(4) {
  width: 2px;
  height: 100%;
  .transition3-1;
    transition-delay: 2.5s;
}



.box__line:nth-child(1) {
  top: 0;
  left: 0;
  //background: linear-gradient(to right, transparent, orange);
    background: orange;
    transform: translateX(-100%);
    }

.box__line:nth-child(2) {
  top: 0;
  right: 0;
  //background: linear-gradient(to bottom, transparent, orange);
  background: orange;
  transform: translateY(-100%);
}

.box__line:nth-child(3) {
  bottom: 0;
  left: 0;
  //background: linear-gradient(to left, transparent, orange);
 background: orange;
  transform: translateX(100%);
}

.box__line:nth-child(4) {
  top: 0;
  left: 0;
  //background: linear-gradient(to top, transparent, orange);
    background: orange;
  transform: translateY(100%);
}




.active {
.box__line:nth-child(1){
    
     transform: translateX(100%); 
}
    
.box__line:nth-child(2) {
      transform: translateY(100%); 
        
    }
.box__line:nth-child(3){
    
     transform: translateX(-100%); 
}
    
.box__line:nth-child(4) {
      transform: translateY(-100%); 
        
    }

    }

スクロールでアクティブクラス

横線をトランジションで左右移動

トランジションディレイで送らせて

縦線を上下移動

http://www.d-marking.jp/