Issue
Link to my slider that I stripped out of my website: http://users.telenet.be/sphinx1/slider/
I got this slider out of a website where it functions in Chrome but I changed some stuff in the CSS and now it only works with IE and Firefox
In the inspector of Chrome, I see it gives some errors on the animation-delay: 0s;
.
#slider {
margin: 00px auto;
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.photo {
position: absolute;
animation: round 16s infinite;
-webkit-animation:round 16s infinite;
-o-animation:round 16s infinite;
-moz-animation:round 16s infinite;
-ms-animation:round 16s infinite;
opacity: 0;
}
@keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}
@-webkit-keyframe round{
25%{opacity:1;}
40%{opacity:0;}
}
@-o-keyframes round {
25%{opacity:1;}
40%{opacity:0;}
}
@-moz-keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}
@-ms-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;}
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;}
img:nth-child(4){-moz-animation-delay:0s;}
img:nth-child(3){-moz-animation-delay:4s;}
img:nth-child(2){-moz-animation-delay:8s;}
img:nth-child(1){-moz-animation-delay:12s;}
img:nth-child(4){-ms-animation-delay:0s;}
img:nth-child(3){-ms-animation-delay:4s;}
img:nth-child(2){-ms-animation-delay:8s;}
img:nth-child(1){-ms-animation-delay:12s;}
img:nth-child(4){-o-animation-delay:0s;}
img:nth-child(3){-o-animation-delay:4s;}
img:nth-child(2){-o-animation-delay:8s;}
img:nth-child(1){-o-animation-delay:12s;}
Solution
You missed the "s" off of @-webkit-keyframes
Replace this
@-webkit-keyframe round{
25%{opacity:1;}
40%{opacity:0;}
}
With this
@-webkit-keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}
Answered By - Andy Mardell
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.