邊框線條動畫

Question

如何用Javascript或jQuery做同樣的事情？

小提琴https://jsfiddle.net/ppynxokq/

用CSS它也適用，但在最後一行完成我需要的行重新開始。最後的<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>