爲什麼這些按鈕沒有在Firefox或Chrome中使用CSS3動畫？

Question

這裏是我用於動畫的CSS。任何幫助獲得這項工作將非常感激。背景圖像應該越來越大，並且與按鈕的文字一起居中。然而，當我徘徊時，它安然無恙地坐在那裏，拒絕移動。

@keyframes buttonAnim{ 
    from{ 
     background-color: rgba(63,62,68,0.75); 
     background-size: 40%; 
     background-position: left; 
     padding-left:40px; 
     text-align: left; 

    } 
    to { 
     background-color: rgba(63,62,68,0.95); 
     background-size: 100%; 
     background-position: center; 
     padding-left:0px; 
     text-align: center; 
    } 
} 
.button{ 
    color:White; 
    background-image: url(/images/buttonBack.png); 
    background-color: rgba(63,62,68,0.75); 
    border: white 1px solid; 
    border-radius: 5px; 
    background-size: 40%; 
    background-position: left; 
    background-repeat: no-repeat; 
    padding-left: 30px; 
    text-align: left; 
    min-height: 40px; 
    line-height: 38px; 
} 
.button:hover{ 
    animation: buttonAnim 1s;  
} 

Answer 1

CSS關鍵幀/動畫仍處於供應商前綴狀態，因此需要這些前綴才能工作。

/* for Firefox: */ 
@-moz-keyframes buttonAnim{ 
    from{ 
     /* removed for brevity */ 

    } 
    to { 
     /* removed for brevity */ 
    } 
} 

/* for IE: */ 
@-ms-keyframes buttonAnim{ 
    from{ 
     /* removed for brevity */ 

    } 
    to { 
     /* removed for brevity */ 
    } 
} 

/* for Opera (under Presto): */ 
@-o-keyframes buttonAnim{ 
    from{ 
     /* removed for brevity */ 

    } 
    to { 
     /* removed for brevity */ 
    } 
} 

/* for Webkit: */ 
@-webkit-keyframes buttonAnim{ 
    from{ 
     /* removed for brevity */ 

    } 
    to { 
     /* removed for brevity */ 
    } 
} 

/* for standards compliant browsers when the spec 
    is complete/implemented: */ 
@buttonAnim{ 
    from{ 
     /* removed for brevity */ 

    } 
    to { 
     /* removed for brevity */ 
    } 
} 

/* called with vendor-prefixes too, sadly */ 
.button:hover{ 
    -moz-animation: buttonAnim 1s; 
    -ms-animation: buttonAnim 1s; 
    -o-animation: buttonAnim 1s; 
    -webkit-animation: buttonAnim 1s; 
    animation: buttonAnim 1s; 
} 

JS Fiddle demo。