CSS animation doesn't work in Firefox or Safari although I'm using vendor prefixes

Question

I am using Sass and Bourbon to create a loading bar in CSS and it works in Chrome but doesn't work in other browsers. I'm not entirely sure as to what the issue is. My CSS has all of the proper vendor prefixes. Here is a link to a Codepen as well as my code below if you don't feel like leaving this site.

http://codepen.io/ellenbrook/pen/eyLDg

<div class="container">
  <h1>Loading Bar</h1>
  <h2>Without text</h2>
  <div class="animated"></div>
  <h2>With text</h2>
  <div class="animated">Loading</div>
</div>

SCSS (Compiled below)

/* Change settings here */
$border-color: #9d9d9d;
$border-radius: 4px;
$degree: -55deg;
$height: 20px;
$animation-speed: .75s;

/*bar colors*/
$dark-color: #d1d1d1;
$light-color: #FAFAFA;
$shadow-color: #b6b6b6;
$stroke-color: $border-color;
$inner-text-color: #fff;

/*Mixin stuff*/
@mixin keyframes($name) {
  @-moz-keyframes #{$name}    { @content; }
  @-webkit-keyframes #{$name} { @content; }
  @-o-keyframes #{$name}      { @content; }
  @-ms-keyframes #{$name}     { @content; }
  @-khtml-keyframes #{$name}  { @content; }
  @keyframes #{$name}         { @content; }
}

// Create the keyframes using the mixin
@include keyframes(striped-background) {
  0% {    
    background:
       repeating-linear-gradient($degree, $dark-color, $dark-color 10px,$light-color 10px,$light-color 20px);
  }

  100% {
    background: repeating-linear-gradient($degree, $light-color,$light-color 10px,$dark-color 10px,$dark-color 20px);
  }
}

.loading-bar {
  width: 227px;
  margin: 0 auto;
  height: $height;
  border: 1px solid $border-color;
  border-radius: $border-radius;
  background: $light-color;

  /* Box Shadow */
  -moz-box-shadow: inset 0px 2px 10px $shadow-color;
  -webkit-box-shadow: inset 0px 2px 10px $shadow-color;
  box-shadow: inset 0px 2px 10px $shadow-color;

  /* Text Info */
  color: $inner-text-color;
  text-shadow:
   -1px -1px 0 $stroke-color,  
    1px -1px 0 $stroke-color,
    -1px 1px 0 $stroke-color,
     1px 1px 0 $stroke-color;
}

.animated {
  @extend .loading-bar;

  /*The fun begins here */
  @include animation(striped-background $animation-speed linear infinite); 
}

.firefox {
  @extend .loading-bar;
}


/* Stuff no one cares about */


body {
  background: #fff;
}

@import url(http://fonts.googleapis.com/css?family=Lato:700);

.container {
  margin: 0 auto;
  width: 500px;
  text-align: center;
  color: #454545;
  text-transform: uppercase;
  font-family: 'Lato', sans-serif;
 }

Compiled CSS

/* Change settings here */
/*bar colors*/
/*Mixin stuff*/
@import url(http://fonts.googleapis.com/css?family=Lato:700);
@-webkit-keyframes striped-background {
  0% {
    background: -webkit-repeating-linear-gradient(145deg, #d1d1d1, #d1d1d1 10px, #FAFAFA 10px, #FAFAFA 20px);
    background: repeating-linear-gradient(-55deg, #d1d1d1, #d1d1d1 10px, #FAFAFA 10px, #FAFAFA 20px);
  }
  100% {
    background: -webkit-repeating-linear-gradient(145deg, #FAFAFA, #FAFAFA 10px, #d1d1d1 10px, #d1d1d1 20px);
    background: repeating-linear-gradient(-55deg, #FAFAFA, #FAFAFA 10px, #d1d1d1 10px, #d1d1d1 20px);
  }
}
@-ms-keyframes striped-background {
  0% {
    background: repeating-linear-gradient(-55deg, #d1d1d1, #d1d1d1 10px, #FAFAFA 10px, #FAFAFA 20px);
  }
  100% {
    background: repeating-linear-gradient(-55deg, #FAFAFA, #FAFAFA 10px, #d1d1d1 10px, #d1d1d1 20px);
  }
}
@-khtml-keyframes striped-background {
  0% {
    background: -webkit-repeating-linear-gradient(145deg, #d1d1d1, #d1d1d1 10px, #FAFAFA 10px, #FAFAFA 20px);
    background: repeating-linear-gradient(-55deg, #d1d1d1, #d1d1d1 10px, #FAFAFA 10px, #FAFAFA 20px);
  }
  100% {
    background: -webkit-repeating-linear-gradient(145deg, #FAFAFA, #FAFAFA 10px, #d1d1d1 10px, #d1d1d1 20px);
    background: repeating-linear-gradient(-55deg, #FAFAFA, #FAFAFA 10px, #d1d1d1 10px, #d1d1d1 20px);
  }
}
@keyframes striped-background {
  0% {
    background: -webkit-repeating-linear-gradient(145deg, #d1d1d1, #d1d1d1 10px, #FAFAFA 10px, #FAFAFA 20px);
    background: repeating-linear-gradient(-55deg, #d1d1d1, #d1d1d1 10px, #FAFAFA 10px, #FAFAFA 20px);
  }
  100% {
    background: -webkit-repeating-linear-gradient(145deg, #FAFAFA, #FAFAFA 10px, #d1d1d1 10px, #d1d1d1 20px);
    background: repeating-linear-gradient(-55deg, #FAFAFA, #FAFAFA 10px, #d1d1d1 10px, #d1d1d1 20px);
  }
}
.loading-bar, .animated, .firefox {
  width: 227px;
  margin: 0 auto;
  height: 20px;
  border: 1px solid #9d9d9d;
  border-radius: 4px;
  background: #FAFAFA;
  /* Box Shadow */
  -webkit-box-shadow: inset 0px 2px 10px #b6b6b6;
  box-shadow: inset 0px 2px 10px #b6b6b6;
  /* Text Info */
  color: #fff;
  text-shadow: -1px -1px 0 #9d9d9d, 1px -1px 0 #9d9d9d, -1px 1px 0 #9d9d9d, 1px 1px 0 #9d9d9d;
}

.animated {
  /*The fun begins here */
  -webkit-animation: striped-background 0.75s linear infinite;
  animation: striped-background 0.75s linear infinite;
}

/* Stuff no one cares about */
body {
  background: #fff;
}

.container {
  margin: 0 auto;
  width: 500px;
  text-align: center;
  color: #454545;
  text-transform: uppercase;
  font-family: 'Lato', sans-serif;
}

Take a look at your keyframes, the most of the them have background twice in 0% and 100%. Delete one background in each 0% and 100%. The webkit background is only neccesary in the webkit keyframe. — 0lli.rocks, Sep 02 '14 at 14:27

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

It looks like normally you can't animate background-image (not for chrome apparently).

Mozilla developper network animatied properties.

Older post.

But you can animate his position like in Lea Verou's Animatable

edited May 23 '17 at 12:12

Community

1
1

answered Sep 02 '14 at 14:35

AlexDom

701
4
14

But the background animation seems to work in Chrome? I'll take a look at the links you provided! :) – Ellenbrook Sep 02 '14 at 14:47
I have created a jsfiddle to justify my point : http://jsfiddle.net/24kbspo4/1/ All needed rules are here, color of text is changing and not background-image for anybody not Chrome. – AlexDom Sep 02 '14 at 15:02
Got ya. I ended up using some of the links you posted with an older style CSS gradient. http://codepen.io/ellenbrook/pen/xCiJE?editors=010 – Ellenbrook Sep 02 '14 at 16:42

CSS animation doesn't work in Firefox or Safari although I'm using vendor prefixes

1 Answers1