0

これは私のCSSです：

#pays li{
list-style:none;
margin-left:44px;
display:block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background:url('http://symbolset.com/images/paypal-logo.png') no-repeat;
transition:0.2s;
-moz-transition:0.2s;
-webkit-transition:0.2s;
-o-transition:0.2s;
background-size:300px 180px;
}
#pays li:hover{background:url('http://data-informed.com/wp-content/uploads/2012/10/PayPal_logo.svg-crop-300x180.png') no-repeat}
#paypal{width:300px;height:180px}​

jsfiddleの完全なコードは次のとおりです。Chrome では完璧に動作しますが、他のすべてのブラウザでは動作しません。

4

2 に答える 2

0

background-image 変更のトランジションは非常にプールでサポートされている atm であるため、2 つのオプションがあります。

  1. 画像スプライトを使用して背景位置をアニメーション化する
  2. 別の要素を埋め込み (残念ながら、疑似要素を使用することはできません。それらのアニメーションもサポートが非常に不十分です。atm) および不透明度をアニメーション化します。
于 2012-12-10T17:24:12.170 に答える
0

background-size「CSS Backgrounds and Borders Module Level 3」の以前のドラフトではアニメーション化できませんでした。ブラウザ間でまだ実装されていないと思います。しかし実際には、ドラフトの時点でアニメーション化可能である必要があります(「アニメーション化可能: キーワード値を除いてはい」)。

背景モジュールと遷移モジュールの両方がまだ完成していないことを常に覚えておいてください。「CSS Backgrounds and Borders Level 3」は「Candidate Recommendation」ステータスにあり、「CSS Transitions」は単なる「Working Draft」です。そのため、今後変更される可能性がある不安定なテクノロジーを使用しています。Chromium が既に実装しているものを信用しないでください。変更される可能性があります。

CSS でアニメーション可能なプロパティの一覧: http://oli.jp/2010/css-animatable-properties/

CSS 開発状況の概要: http://www.w3.org/Style/CSS/current-work

于 2012-12-10T16:52:40.410 に答える