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

为什么这些按钮在使用CSS3的Firefox或Chrome中没有动画？

1 个答案: