0

要素の背景画像を切り替える単純な CSS3 キーフレーム アニメーションを 1 つ作成しました。完全に機能していますが、私の信頼できる Firefox には失敗しました。最初はフリープレフィックスを使用していましたが、それが問題かもしれないと思った後、すべてのプレフィックスを手動で書きましたが、Firefoxにはまだ何もありません。

例はhttp://madebym.me/test/nimbus/index.htmlで見ることができます。

また、関連するコードは次のとおりです。トラックはライトのオンとオフを切り替える必要があります。

-webkit-animation: switch-truck-lights 1s linear infinite normal;
-moz-animation: switch-truck-lights 1s linear infinite normal;
-ms-animation: switch-truck-lights 1s linear infinite normal;
-o-animation: switch-truck-lights 1s linear infinite normal;
animation: switch-truck-lights 1s linear infinite normal;
}

@keyframes "switch-truck-lights" {
from {
    background-image: url(../images/truck-off.png);
}

to {
    background-image: url(../images/truck-on.png);
}
}

@-moz-keyframes switch-truck-lights {
    from {
        background-image: url(../images/truck-off.png);
    }

    to {
        background-image: url(../images/truck-on.png);
    };
}

@-webkit-keyframes "switch-truck-lights" {
    from {
        background-image: url(../images/truck-off.png);
    }

    to {
        background-image: url(../images/truck-on.png);
    };
}

@-ms-keyframes "switch-truck-lights" {
    from {
        background-image: url(../images/truck-off.png);
    }

    to {
        background-image: url(../images/truck-on.png);
    };
}

@-o-keyframes "switch-truck-lights" {
    from {
        background-image: url(../images/truck-off.png);
    }

    to {
        background-image: url(../images/truck-on.png);
    };
}
4

1 に答える 1

0

background-position は有効なトランジション/アニメーション プロパティではないようです。何らかの理由で Chrome で動作しますが、他の唯一の解決策は、絶対に配置された画像をフェードインアウトするか、画像スプライトの背景位置をアニメーション化することです。

それはまさに私がしたことです。

于 2013-07-26T12:03:29.570 に答える