html - Pure CSS Slider -

html - Pure CSS Slider -

so i'm getting acquainted css3 , i've been trying find purely css slider. found 1 looking on code pen reason when seek code in localhost or jsfiddle doesn't work. there no external files accessing far can tell in codepen , there no jquery needed. below i've linked (working) codepen , jsfiddle. ideas why 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;}

this works perfectly, please check: jsfiddle demo. syntax css3 animations , keyframes beingness used in code standard syntax, e.g. animation:round 16s infinite;, @keyframes round{ 25%{opacity:1;} 40%{opacity:0;} } , img:nth-child(4){animation-delay:0s;}.

you should instead utilize -webkit-animation:round 16s infinite;`, `@-webkit-keyframes round{ 25%{opacity:1;} 40%{opacity:0;} } ` , `img:nth-child(4){-webkit-animation-delay:0s;} it's browser compatible.

more info on available on here.

class="snippet-code-css lang-css prettyprint-override">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; } class="snippet-code-html lang-html prettyprint-override"><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>

html css css3 slider