Question

这是一个滑动效果，此滑块在Internet Explorer中可用但在Google Chrome中无效任何想法

这是我的HTML ----- ----- XXXXX

<body>
<div id="slider">
    <figure>
    <img src="images/1.jpg" alt=""/>
    <img src="images/2.jpg" alt=""/>
    <img src="images/3.jpg" alt=""/>
    <img src="images/4.jpg" alt=""/>
    <img src="images/1.jpg" alt=""/>
    </figure>
</div>

</body>

- - - - - - - - XXXXX

这是我的CSS ----- ----- XXXXX

#slider{
    width: 80%;
    max-width: 980px;
    overflow-x: hidden;
    overflow-y: hidden;
    }

#slider figure{
    width:500%;
    position:relative;
    margin-top:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-left:0px;
    padding-top:0px;
    padding-right:0px;
    padding-bottom:0px;
    padding-left:0px;
    font-size:0px;
    text-align:left;
    -webkit-animation:30000ms slidy infinite;
    -moz-animation:30000ms slidy infinite;
    -ms-animation:30000ms slidy infinite;
    -o-animation:30000ms slidy infinite;
    animation:30000ms slidy infinite;
}
figure img {
    width: 20%;
    height: auto;
    float: left;
    }

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

- - - - - - - - XXXXX

现在我需要知道我在哪里犯错误

Answer 1

/* Chrome, Safari, Opera */
@-webkit-keyframes slidy {

    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}

添加此css并重试。

CSS Slidy在IE中工作但不在Chrome中工作

1 个答案: