尽管我使用的是供应商前缀，但 CSS 动画在 Firefox 或 Safari 中不起作用

Question

我正在使用 Sass 和 Bourbon 在 CSS 中创建加载栏，它在 Chrome 中有效，但在其他浏览器中无效。我不完全确定问题出在哪里。我的 CSS 具有所有正确的供应商前缀。如果你不想离开这个网站，这里有一个 Codepen 的链接以及我下面的代码。

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(下面编译)

/* 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;
 }

编译后的 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;
}

Answer 1

看起来通常你不能为背景图像设置动画(显然不适用于 chrome)。

Mozilla developper network animatied properties .

Older post .

但是你可以像 Lea Verou's Animatable 那样为他的位置设置动画