html - CSS Slide Show not working for IE -
i implementing css slide show on site. used codepen guide: http://codepen.io/antoniskamamis/pen/hjbre
i first experienced issue slide show not working correctly in safari. able address issue adding animation-delay properties browsers. tested on browsers except ie until now, , reason slide show not work in ie. can see demo (code pen) in fact work in ie.
would additional css added handle animations in safari have caused ie break? if has idea, extremely appreciated!
.slider { margin: 10px auto; width: 500px; height: 320px; overflow: hidden; position: relative; } .photo { position: absolute; -webkit-animation: round 16s infinite; -moz-animation: round 16s infinite; -ms-animation: round 16s infinite; -o-animation: round 16s infinite; animation: round 16s infinite; -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=0)"; filter: alpha(opacity=0); opacity: 0; } @keyframes "round" { 25% { -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=100)"; filter: alpha(opacity=100); opacity: 1; } 40% { -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=0)"; filter: alpha(opacity=0); opacity: 0; } } @-moz-keyframes round { 25% { filter: alpha(opacity=100); opacity: 1; } 40% { filter: alpha(opacity=0); opacity: 0; } } @-webkit-keyframes "round" { 25% { filter: alpha(opacity=100); opacity: 1; } 40% { filter: alpha(opacity=0); opacity: 0; } } @-ms-keyframes "round" { 25% { -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=100)"; filter: alpha(opacity=100); opacity: 1; } 40% { -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=0)"; filter: alpha(opacity=0); opacity: 0; } } @-o-keyframes "round" { 25% { filter: alpha(opacity=100); opacity: 1; } 40% { filter: alpha(opacity=0); opacity: 0; } } .slider img:nth-child(20) { -webkit-animation-delay: 76s; -moz-animation-delay: 76s; -ms-animation-delay: 76s; -o-animation-delay: 76s; animation-delay: 76s; } .slider img:nth-child(19) { -webkit-animation-delay: 72s; -moz-animation-delay: 72s; -ms-animation-delay: 72s; -o-animation-delay: 72s; animation-delay: 72s; } .slider img:nth-child(18) { -webkit-animation-delay: 68s; -moz-animation-delay: 68s; -ms-animation-delay: 68s; -o-animation-delay: 68s; animation-delay: 68s; } .slider img:nth-child(17) { -webkit-animation-delay: 64s; -moz-animation-delay: 64s; -ms-animation-delay: 64s; -o-animation-delay: 64s; animation-delay: 64s; } .slider img:nth-child(16) { -webkit-animation-delay: 60s; -moz-animation-delay: 60s; -ms-animation-delay: 60s; -o-animation-delay: 60s; animation-delay: 60s; } .slider img:nth-child(15) { -webkit-animation-delay: 56s; -moz-animation-delay: 56s; -ms-animation-delay: 56s; -o-animation-delay: 56s; animation-delay: 56s; } .slider img:nth-child(14) { -webkit-animation-delay: 52s; -moz-animation-delay: 52s; -ms-animation-delay: 52s; -o-animation-delay: 52s; animation-delay: 52s; } .slider img:nth-child(13) { -webkit-animation-delay: 48s; -moz-animation-delay: 48s; -ms-animation-delay: 48s; -o-animation-delay: 48s; animation-delay: 48s; } .slider img:nth-child(12) { -webkit-animation-delay: 44s; -moz-animation-delay: 44s; -ms-animation-delay: 44s; -o-animation-delay: 44s; animation-delay: 44s; } .slider img:nth-child(11) { -webkit-animation-delay: 40s; -moz-animation-delay: 40s; -ms-animation-delay: 40s; -o-animation-delay: 40s; animation-delay: 40s; } slider img:nth-child(10) { -webkit-animation-delay: 36s; -moz-animation-delay: 36s; -ms-animation-delay: 36s; -o-animation-delay: 36s; animation-delay: 36s; } .slider img:nth-child(9) { -webkit-animation-delay: 32s; -moz-animation-delay: 32s; -ms-animation-delay: 32s; -o-animation-delay: 32s; animation-delay: 32s; } .slider img:nth-child(8) { -webkit-animation-delay: 28s; -moz-animation-delay: 28s; -ms-animation-delay: 28s; -o-animation-delay: 28s; animation-delay: 28s; } .slider img:nth-child(7) { -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -ms-animation-delay: 24s; -o-animation-delay: 24s; animation-delay: 24s; } .slider img:nth-child(6) { -webkit-animation-delay: 20s; -moz-animation-delay: 20s; -ms-animation-delay: 20s; -o-animation-delay: 20s; animation-delay: 20s; } .slider img:nth-child(5) { -webkit-animation-delay: 16s; -moz-animation-delay: 16s; -ms-animation-delay: 16s; -o-animation-delay: 16s; animation-delay: 16s; } .slider img:nth-child(4) { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -ms-animation-delay: 12s; -o-animation-delay: 12s; animation-delay: 12s; } .slider img:nth-child(3) { -webkit-animation-delay: 8s; -moz-animation-delay: 8s; -ms-animation-delay: 8s; -o-animation-delay: 8s; animation-delay: 8s; } .slider img:nth-child(2) { -webkit-animation-delay: 4s; -moz-animation-delay: 4s; -ms-animation-delay: 4s; -o-animation-delay: 4s; animation-delay: 4s; } .slider img:nth-child(1) { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; }<div class="slider"> <img class='photo' src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" /> <img class='photo' src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" /> <img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" /> <img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" /> </div>
it looks keyframe targeting webkit browsers. try this:
/* chrome, safari, opera */ @-webkit-keyframes round { 25% { opacity: 1; } 40% { opacity: 0; } } /* standard syntax */ @keyframes round { 25% { opacity: 1; } 40% { opacity: 0; } } also css
.photo { position: absolute; -webkit-animation: round 16s infinite; -ms-animation: round 16s infinite; animation: round 16s infinite; opacity: 0; width: 100%; } 
Comments
Post a Comment