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

Popular posts from this blog

monitor web browser programmatically in Android? -

Shrink a YouTube video to responsive width -

wpf - PdfWriter.GetInstance throws System.NullReferenceException -