google chrome - CSS3 Compatibility Issues -
my css3 animation doesn't work in firefox , safari though in chrome. using code executing animation:
html { background:#262930 url('./images/pw_maze_black.png') no-repeat left top fixed; background-size:cover; animation:slides 60s; animation-iteration-count: infinite; -moz-animation:slides 60s; -moz-animation-iteration-count: infinite; -webkit-animation:slides 60s; -webkit-animation-iteration-count: infinite; }
and animation (for each browser):
@keyframes slides { 0% {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;} 6% {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;} 12% {background:url('./images/addix/slide_bg/2.jpg') no-repeat top center;} 18% {background:url('./images/addix/slide_bg/2.jpg') no-repeat top center;} 25% {background:url('./images/addix/slide_bg/3.jpg') no-repeat top center;} 31% {background:url('./images/addix/slide_bg/3.jpg') no-repeat top center;} 37% {background:url('./images/addix/slide_bg/4.jpg') no-repeat top center;} 43% {background:url('./images/addix/slide_bg/4.jpg') no-repeat top center;} 50% {background:url('./images/addix/slide_bg/5.jpg') no-repeat top center;} 56% {background:url('./images/addix/slide_bg/5.jpg') no-repeat top center;} 62% {background:url('./images/addix/slide_bg/6.jpg') no-repeat top center;} 68% {background:url('./images/addix/slide_bg/6.jpg') no-repeat top center;} 75% {background:url('./images/addix/slide_bg/7.jpg') no-repeat top center;} 81% {background:url('./images/addix/slide_bg/7.jpg') no-repeat top center;} 87% {background:url('./images/addix/slide_bg/8.jpg') no-repeat top center;} 93% {background:url('./images/addix/slide_bg/8.jpg') no-repeat top center;} 100% {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;} } @-moz-keyframes slides /* firefox */ { 0% {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;} 6% {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;} 12% {background:url('./images/addix/slide_bg/2.jpg') no-repeat top center;} 18% {background:url('./images/addix/slide_bg/2.jpg') no-repeat top center;} 25% {background:url('./images/addix/slide_bg/3.jpg') no-repeat top center;} 31% {background:url('./images/addix/slide_bg/3.jpg') no-repeat top center;} 37% {background:url('./images/addix/slide_bg/4.jpg') no-repeat top center;} 43% {background:url('./images/addix/slide_bg/4.jpg') no-repeat top center;} 50% {background:url('./images/addix/slide_bg/5.jpg') no-repeat top center;} 56% {background:url('./images/addix/slide_bg/5.jpg') no-repeat top center;} 62% {background:url('./images/addix/slide_bg/6.jpg') no-repeat top center;} 68% {background:url('./images/addix/slide_bg/6.jpg') no-repeat top center;} 75% {background:url('./images/addix/slide_bg/7.jpg') no-repeat top center;} 81% {background:url('./images/addix/slide_bg/7.jpg') no-repeat top center;} 87% {background:url('./images/addix/slide_bg/8.jpg') no-repeat top center;} 93% {background:url('./images/addix/slide_bg/8.jpg') no-repeat top center;} 100% {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;} } @-webkit-keyframes slides /* safari , chrome */ { 0% {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;} 6% {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;} 12% {background:url('./images/addix/slide_bg/2.jpg') no-repeat top center;} 18% {background:url('./images/addix/slide_bg/2.jpg') no-repeat top center;} 25% {background:url('./images/addix/slide_bg/3.jpg') no-repeat top center;} 31% {background:url('./images/addix/slide_bg/3.jpg') no-repeat top center;} 37% {background:url('./images/addix/slide_bg/4.jpg') no-repeat top center;} 43% {background:url('./images/addix/slide_bg/4.jpg') no-repeat top center;} 50% {background:url('./images/addix/slide_bg/5.jpg') no-repeat top center;} 56% {background:url('./images/addix/slide_bg/5.jpg') no-repeat top center;} 62% {background:url('./images/addix/slide_bg/6.jpg') no-repeat top center;} 68% {background:url('./images/addix/slide_bg/6.jpg') no-repeat top center;} 75% {background:url('./images/addix/slide_bg/7.jpg') no-repeat top center;} 81% {background:url('./images/addix/slide_bg/7.jpg') no-repeat top center;} 87% {background:url('./images/addix/slide_bg/8.jpg') no-repeat top center;} 93% {background:url('./images/addix/slide_bg/8.jpg') no-repeat top center;} 100% {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;} }
is fault or firefox , safaris?
edit: link fiddle http://jsfiddle.net/af4ce/1/
one reason might not working in firefox order of animation pre-fixes. put un-prefixed version last, allow browser try implementing version last. because prefixed version can still have behavior linked it, if browser has moved on using un-prefixed versions.
but more of suggestion answer don't know if fix it. might want code jsfiddle (along image) others can see you're trying do.
Comments
Post a Comment