为什么这些按钮没有在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。