Q

轉型Firefox或Opera不工作，不僅僅是Chrome

2012-12-10 19 views 0 likes

0

這是我的CSS：轉型Firefox或Opera不工作，不僅僅是Chrome

#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}

這裏是full code in jsfiddle。它在Chrome中完美運行，所有其他瀏覽器都不起作用。

2012-12-10 Déjà Bond

+0

嗯，在鉻看起來不太好。理論上，沒有什麼可以在網址更改上進行動畫製作。也許這是鉻的一個小故障？ – Christoph

+0

我需要在兩幅圖像之間淡入淡出，它的鍍鉻效果很好並且光滑 –

+0

您是如何解決您的問題的？ – Christoph

A

回答

0

background-size在早期的「CSS背景和邊框模塊級別3」草案中無法生成動畫。我想這只是在瀏覽器中尚未實現。但實際上it should be animatable as of the draft（「Animatable：yes except keyword values」）。

一定要記住，背景和轉場模塊都還沒有完成。「CSS背景和邊界3級」處於「候選推薦」狀態，「CSS轉換」僅僅是「工作草案」。所以你使用的是不穩定的技術，可能會進一步發生變化。不要相信Chromium已經實施的內容，它可能會改變。

動畫性質的CSS列表：http://oli.jp/2010/css-animatable-properties/

對CSS的發展狀態概述：http://www.w3.org/Style/CSS/current-work

2012-12-10 16:52:40 feeela

+1

這不是需要動畫的大小（大小本身並不是很好支持atm），但url更改更糟糕。 – Christoph

+0

@Christoph呃，抱歉 - 但原因可能是一樣的。 CSS轉換現在只是一個工作草案。 – feeela

0

由於對背景圖像的變化轉換是如此pooly ATM支持，你有兩個選擇：

使用imagesprite併爲背景位置設置動畫
嵌入了另一個元素（不幸的是，您不能使用僞元素，它們上的動畫是非常不好支持，ATM）和動畫不透明

2012-12-10 17:24:12 Christoph

相關問題