CSS Slidy работает в IE, но не работает в Chrome

-1

здесь является slidy эффект, этот слайдер работает в Internet Explorer, но не работает в Google Chrome Любая идеяCSS Slidy работает в IE, но не работает в 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>

----- ----- ххххх

вот мой CSS ----- ----- ххххх

#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%; } 
}

----- ----- ххххх

Теперь мне нужно знать, где я делаю ошибку

источник

2014-10-23 Shakeel

Для Chrome/Safari требуется префикс -webkit для ключевых кадров. - http://caniuse.com/#search=css-animation –

/* 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 и попробуйте еще раз.

источник

2014-10-23 10:50:19 saifur

Это работает ... большое спасибо – Shakeel

Отлично. принять ответ – saifur

CSS Slidy работает в IE, но не работает в Chrome

ответ

Смежные вопросы