Pure CSS Slider

Question

Итак, я знакомлюсь css3, и я пытался найти чисто css-слайдер. Я, наконец, нашел тот, который точно так же, как я искал на ручке кода, но по какой-то причине, когда я пытаюсь использовать код в localhost или jsfiddle, он не работает. Нет внешних файлов, доступ к которым можно получить в кодефене, и нет необходимости в jQuery. Ниже я связал (рабочий) код и jsfiddle. Любые идеи, почему это не будет работать в другом месте?

codepen

jsFiddle

HTML

<div class="slider"> 
    <img class='photo' src="http://i.imgur.com/zMGSiyl.jpg" alt="" /> 
    <img class='photo' src="http://i.imgur.com/soQhb13.jpg" alt="" /> 
    <img class='photo' src="http://i.imgur.com/39yOaYB.jpg" alt="" /> 
    <img class='photo' src="http://i.imgur.com/tnctKD4.jpg" alt="" /> 
</div> 

CSS

body{background:#000;} 

.slider{ 
    margin:50px auto; 
    width:100%; 
    height:300px; 
    overflow:hidden; 
    position:relative; 

} 
.photo{ 
    position:absolute; 
    animation:round 16s infinite; 
    opacity:0; 
    width:100%; 

} 
@keyframes round{ 
    25%{opacity:1;} 
    40%{opacity:0;} 
} 

img:nth-child(4){animation-delay:0s;} 
img:nth-child(3){animation-delay:4s;} 
img:nth-child(2){animation-delay:8s;} 
img:nth-child(1){animation-delay:12s;} 

Answer 1

Это работает Perfe ctly, пожалуйста, проверьте: jsFiddle Demo. Синтаксис анимации CSS3 и ключевых кадров, которые использовались в коде, был стандартным синтаксисом, например. animation:round 16s infinite;, @keyframes round{ 25%{opacity:1;} 40%{opacity:0;} } и img:nth-child(4){animation-delay:0s;}.

Вы должны использовать -webkit-animation:round 16s infinite;`, `@-webkit-keyframes round{ 25%{opacity:1;} 40%{opacity:0;} } ` and `img:nth-child(4){-webkit-animation-delay:0s;} так, чтобы он был совместим с браузером.

Дополнительная информация об этом доступна по телефону here.

body { 
 
    background: #000; 
 
} 
 
.slider { 
 
    margin: 50px auto; 
 
    width: 100%; 
 
    height: 300px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.photo { 
 
    position: absolute; 
 
    -webkit-animation: round 16s infinite; 
 
    -moz-animation: round 16s infinite; 
 
    -o-animation: round 16s infinite; 
 
    animation: round 16s infinite; 
 
    opacity: 0; 
 
    width: 100%; 
 
} 
 
@-webkit-keyframes round { 
 
    25% { 
 
    opacity: 1; 
 
    } 
 
    40% { 
 
    opacity: 0; 
 
    } 
 
} 
 
@-moz-keyframes round { 
 
    25% { 
 
    opacity: 1; 
 
    } 
 
    40% { 
 
    opacity: 0; 
 
    } 
 
} 
 
@-o-keyframes round { 
 
    25% { 
 
    opacity: 1; 
 
    } 
 
    40% { 
 
    opacity: 0; 
 
    } 
 
} 
 
@keyframes round { 
 
    25% { 
 
    opacity: 1; 
 
    } 
 
    40% { 
 
    opacity: 0; 
 
    } 
 
} 
 
img:nth-child(4) { 
 
    -webkit-animation-delay: 0s; 
 
} 
 
img:nth-child(3) { 
 
    -webkit-animation-delay: 4s; 
 
} 
 
img:nth-child(2) { 
 
    -webkit-animation-delay: 8s; 
 
} 
 
img:nth-child(1) { 
 
    -webkit-animation-delay: 12s; 
 
}

<div class="slider"> 
 
    <img class='photo' src="http://i.imgur.com/zMGSiyl.jpg" alt="" /> 
 
    <img class='photo' src="http://i.imgur.com/soQhb13.jpg" alt="" /> 
 
    <img class='photo' src="http://i.imgur.com/39yOaYB.jpg" alt="" /> 
 
    <img class='photo' src="http://i.imgur.com/tnctKD4.jpg" alt="" /> 
 
</div>

Answer 2

Вам может понадобиться использовать конкретный поставщик keyframes. Codepen умный и в этом случае сверхкомпенсирует.

@-webkit-keyframes NAME-YOUR-ANIMATION { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@-moz-keyframes NAME-YOUR-ANIMATION { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@-o-keyframes NAME-YOUR-ANIMATION { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@keyframes NAME-YOUR-ANIMATION { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 

Подробнее http://css-tricks.com/snippets/css/keyframe-animation-syntax/