2

アニメーションに使用する 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;     
}
4

1 に答える 1

2

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 フィドルのデモ。

于 2013-07-07T23:11:58.570 に答える