0

Chromeでのみ機能する単純な画像スワップトランジションがあります。コード：

<a class="twitter" href="index.php"></a>

.twitter {
    width:26px;
    height:26px;
    display:block;
    background:transparent url('../images/twitter.jpg') center top no-repeat;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    }

.twitter:hover {background-image: url('../images/twitter-hover.jpg');}

デモ： http： //jsfiddle.net/gWKEQ/17/

4

1 に答える 1

1

これは、Chromeだけが実際にCSSプロパティのアニメーション化をサポートしているためです。これは、仕様background-imageによれば実際には正しくありません。

背景画像

アニメート可能：いいえ

アニメーション化できるもの（どのブラウザなどでも）の詳細については、このページを確認してください。将来的には、他のブラウザでプロパティのアニメーション化が可能になると期待されbackground-imageます（仕様は変更されます）。これは、プログラマー/デザイナーが実際に望んでいることだからです。

于 2013-02-15T13:49:09.667 に答える