動畫按鈕的圖像聚焦時，使用CSS

Question

我知道我可以讓我的按鈕的圖像大時，它使用類似CSS重點：

button image { 
    width:64px; 
    height:64px; 
} 

button:focus, button:focus image { 
    width:128px; 
    height:128px; 
} 

但是，有沒有一種方法，使圖像逐漸成長（像動畫效果）？

Answer 1

CSS Transitions使這成爲可能，但最近纔在草案規範中出現，所以瀏覽器支持很弱。

由於這是一種美容效果，我可能會對有限的支持感到滿意。 YMMV，所以如果你不是，那麼你需要看看JavaScript來實現這一點。有各種各樣的圖書館make animation easier。

Answer 2

你不能用當前的CSS和HTML單獨做動畫。我會推薦jquery而不是css。你可以用html5做，但因爲所有瀏覽器都不支持html5。

Answer 3

我這樣做了一次，使用一個動畫.gif作爲聚焦圖像（和一個反向動畫.gif回去）。它工作正常，但當鼠標出現在鏈接上時，它很容易變得不穩定。

Answer 4

如果你想在CSS中做到這一點（如問題中所暗示的），你可以使用CSS轉換來完成。這通常被錯誤地稱爲HTML5的一部分 - 事實並非如此。它是CSS的一部分。但是這種區別往往是模糊的，因爲它們都是新的，並且它們的支持一起被引入到瀏覽器中。

如果您正在考慮使用CSS轉換，重要的是要知道它們是非常新的，並且只有非常有限的支持 - 即僅在一個或兩個瀏覽器中，甚至不一定是所有功能，甚至不能正確兼容在瀏覽器之間。

所以，如果你想要的東西是可靠的，並且可以在所有當前的瀏覽器中工作，那麼你不能真正使用CSS。你最好的選擇是使用JQuery--這種事情在JQuery中非常容易，並且它適用於今天使用的每個瀏覽器。

Answer 5

除IE外，最新的瀏覽器都支持CSS Transitions和CSS Transforms所需的功能。

基於Webkit的瀏覽器，Firefox和Opera支持你所需要的。我不知道IE9的狀態的唯一平臺，所以如果你正在創建一個普通的老網站，那你的運氣不好。

看一看：

• CSS3 2D Transforms
• CSS3 3D Transforms
• CSS3 Transitions

如果你有迎合到Internet Explorer看一看：

• JQuery Effects