1

Ok, so I have this example:

http://jsfiddle.net/2uux3jh7/

It works fine on Chrome, but it does not in Firefox. Anyone know why?

HTML uses only one div with .front class. Here's the code for CSS:

.front {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: static;
  -webkit-animation: fading 3s infinite;
  animation: fading 3s infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  font-size: 1em;
  -webkit-font-smoothing: subpixel-antialiased;
  text-shadow: 0 0 1px rgba(0,0,0,0.3);
  -webkit-text-stroke: 1px transparent;
}

@-webkit-keyframes fading {
  0%, 35%   { background-image: url('http://khongthe.com/wallpapers/people/pretty-woman-65379.jpg'); }
  65%, 100%  { background-image: url('http://www.inspiringwomen.co.za/wp-content/uploads/2010/08/happy-woman-hd-1080p-wallpapers-download.jpg'); }
}

@keyframes fading {
  0%, 35%   { background-image: url('http://khongthe.com/wallpapers/people/pretty-woman-65379.jpg'); }
  65%, 100%  { background-image: url('http://www.inspiringwomen.co.za/wp-content/uploads/2010/08/happy-woman-hd-1080p-wallpapers-download.jpg'); }
}

@-moz-keyframes fading {
  0%, 35%   { background-image: url('http://khongthe.com/wallpapers/people/pretty-woman-65379.jpg'); }
  65%, 100%  { background-image: url('http://www.inspiringwomen.co.za/wp-content/uploads/2010/08/happy-woman-hd-1080p-wallpapers-download.jpg'); }
}
David
  • 1,932
  • 3
  • 27
  • 35

1 Answers1

1

Unfortunately, Firefox can’t transition background-image.. So you have to do it another way.

Here is another stackoverfow question related to your problem, with some alternatives. : CSS3 background image transition

Community
  • 1
  • 1
user2987016
  • 91
  • 5
  • thanks for the info. I had no idea. I really wouldn't expect it in Firefox, in IE definitely, but not FF. I'll use jQuery instead. It's cross browser. – David Nov 16 '14 at 18:09