使用僞類不工作的關鍵幀

我使用僞類和關鍵幀一起用於圖像的滑動動畫，但我無法在瀏覽器上呈現動畫。請幫我調試這段代碼。提前致謝：）。使用僞類不工作的關鍵幀

<html> 
    <style> 
      #fullimage > li:target {  
      animation: slideImage 50s linear; 
      -webkit-animation: slideImage 50s linear; 
      -moz-animation: slideImage 50s linear; 
      } 

     @keyframes slideImage { 
      from { left: -700px; } 
      to { left: 0px; } 
     } 

     @-webkit-keyframes slideImage { 
      from {left: -700px; } 
      to { left: 0px; } 
     } 

     @-moz-keyframes slideImage { 
      from {left: -700px; } 
      to { left: 0px; } 
     } 
    </style> 

    <body> 
      <div id="wrapper"> 

       <ul id="fullimage"> 
        <li id="a"> 
         <img src ="a.jpg" /> 
        </li> 
        <li id="b"> 
         <img src ="images/b.jpg" /> 
        </li> 
        <li id="c"> 
         <img src ="c.jpg" /> 
        </li> 
       </ul> 

       <ul id="thumbimage"> 
        <li> 
         <a href="#a"> 
          First one 
         </a> 
        </li> 

        <li> 
         <a href="#b"> 
          Second one 
         </a> 
        </li> 

        <li> 
         <a href="#c"> 
          Third one 
         </a> 
        </li> 
       </ul> 

      </div> 
    </body> 
</html>

來源

2015-10-05 Vamshi Kolanu

動畫和關鍵代碼看起來不錯，但你需要設置position屬性有left工作。

#fullimage > li:target { 
    position: relative; 
}

jsfiddle

來源

2015-10-05 02:00:06 Stickers

使用僞類不工作的關鍵幀

回答

相關問題