html - 使用伪类类的关键帧不起作用

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

<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>

最佳答案

您的动画和关键帧代码看起来不错，但是您需要设置position属性以使left起作用。

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

jsfiddle

关于html - 使用伪类类的关键帧不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32940241/