我的css图像滑块在谷歌浏览器中不起作用但在Mozilla Firefox中有效吗？

Question

CSS：

@-moz-keyframes slidy {
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    90% { left: -300%; }
    95% { left: -400%; }
    100% { left: -400%; }
}
@-webkit-keyframes slidy{
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    90% { left: -300%; }
    95% { left: -400%; }
    100% { left: -400%; }
}

Answer 1

@ - moz是mozilla speicific

如果你想让它运行chrome和safari

，请使用@ -webkit

Answer 2

尝试这样

 @-webkit-keyframes slide {
        10% {
            left: 0;
        }
        14%,20% {
            left: -400px;
        }
        24%,30% {
            left: -800px;
        }
        34%,40% {
            left: -1200px;
        }
        44%,50% {
            left: -1600px;
        }
        54%,60% {
            left: -2000px;
        }
        64%,70% {
            left: -2400px;
        }
        74%,80% {
            left: 0;
        }
    }