Pure CSS Slider - html

Question

So I'm getting acquainted with css3 and I've been trying to find a purely css slider. I finally found one that is exactly as I was looking for on code pen but for some reason when I try the code in localhost or jsfiddle it doesn't work. There is no external files that its accessing as far as I can tell in codepen and there is no jQuery needed. Below I've linked the (working) codepen and jsfiddle. Any ideas why it wont work elsewhere?
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

You may need to use vendor specific keyframes. Codepen is clever and is overcompensating in this instance.
#-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; }
}
More info http://css-tricks.com/snippets/css/keyframe-animation-syntax/

Answer 2

This works perfectly, please check: jsFiddle Demo. The syntax for the CSS3 animations and the keyframes which was being used in the code was the standard syntax, for e.g. animation:round 16s infinite;, #keyframes round{ 25%{opacity:1;} 40%{opacity:0;} } and img:nth-child(4){animation-delay:0s;}.
You should instead use -webkit-animation:round 16s infinite;`, `#-webkit-keyframes round{ 25%{opacity:1;} 40%{opacity:0;} } ` and `img:nth-child(4){-webkit-animation-delay:0s;} so that it's browser compatible.
More information on this is available over 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>