使用伪类不工作的关键帧

我使用伪类和关键帧一起用于图像的滑动动画，但我无法在浏览器上呈现动画。请帮我调试这段代码。提前致谢：）。使用伪类不工作的关键帧

<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

使用伪类不工作的关键帧

回答

相关问题