雖然我使用的是供應商前綴，但Firefox或Safari無法使用CSS動畫

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

它看起來像正常情況下你不能動畫背景圖片（不鍍鉻明顯）。

Mozilla developper network animatied properties。

Older post。

但是你可以激活他的地位就像Lea Verou's Animatable