动画按钮的图像聚焦时，使用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