境界線アニメーション

Question

JavascriptまたはjQueryで同じことをするにはどうすればよいですか？ CSSで

フィドルhttps://jsfiddle.net/ppynxokq/

それも動作しますが、最後の行が実行されたときに、私はすべての繰り返しを開始する行を必要としています。また、最後の<li>要素の境界線の右の線もアニメーション化する必要があります。

アイデア？ ありがとうございますか？

Answer 1

last-childセレクタを使用して、最後のliの境界線を設定します。

li { 
 
     list-style-type:none;  
 
     } 
 
     a { 
 
     float:left; 
 
     font-size: 26px; 
 
     text-align: center; 
 
     color: #000; 
 
     text-decoration: none; 
 
     padding: 50px 35px; 
 
     border-left: 1px solid transparent; 
 
     -webkit-animation: fadeinout 1s linear forwards; 
 
     animation: fadeinout 1s linear forwards; 
 
     } 
 
     a:hover { 
 
      background-color: rgba(0, 0, 0, 0.4); 
 
     } 
 
     li:last-child a:after{ 
 
      content: ''; 
 
      height: 100%; 
 
      width: 0px; 
 
      border-right: 1px solid transparent;   
 
      right: 0; 
 
      top: 0; 
 
      -webkit-animation: fadeinout 1s linear forwards; 
 
      animation: fadeinout 1s linear forwards; 
 
      -webkit-animation-delay: 3s; 
 
      animation-delay: 3s; 
 
      padding:50px 35px 50px 0; 
 
     } 
 

 
     @-webkit-keyframes fadeinout { 
 
     0% { border-color: transparent} 
 
     50% { border-color: black} 
 
     100% { border-color: transparent } 
 
     } 
 

 

 
    li:first-child > a { 
 
     left: 9.5%;  
 
     -webkit-animation-delay: 0.5s; 
 
     animation-delay: 0.5s; 
 
    } 
 
    li:nth-child(2) > a { 
 
     left: 19.5%; 
 
     -webkit-animation-delay: 1s; 
 
     animation-delay: 1s; 
 
    } 
 
    li:nth-child(3) > a { 
 
     left: 29.6%; 
 
     -webkit-animation-delay: 1.5s; 
 
     animation-delay: 1.5s; 
 
    } 
 
    li:nth-child(4) > a { 
 
     left: 39.6%; 
 
     -webkit-animation-delay: 2s; 
 
     animation-delay: 2s; 
 
    } 
 
    li:nth-child(5) > a { 
 
     left: 49.7%; 
 
     -webkit-animation-delay: 2.5s; 
 
     animation-delay: 2.5s; 
 
    } 
 
    li:nth-child(6) > a { 
 
     left: 59.8%; 
 
     -webkit-animation-delay: 3s; 
 
     animation-delay: 3s; 
 
    } 
 
    li:nth-child(7) > a { 
 
     left: 69.9%; 
 
     -webkit-animation-delay: 3.5s; 
 
     animation-delay: 3.5s; 
 
    } 
 
    li:nth-child(8) > a { 
 
     left: 80%; 
 
     -webkit-animation-delay: 4s; 
 
     animation-delay: 4s; 
 
    }

<ul> 
 
     <li><a>one</a></li> 
 
    
 
     <li><a>two</a></li> 
 
    
 
     <li><a>three</a></li> 
 
    
 
     <li><a>four</a></li> 
 
    
 
     <li><a>five</a></li> 
 
</ul>