使用CSS在聚焦时为按钮的图像设置动画

Question

我知道当使用像css这样的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 Transitions来实现。这通常被错误地称为HTML5的一部分 - 它不是;它是CSS的一部分。但这种区别往往是模糊的，因为它们都是新的，对它们的支持正在被带入浏览器中。

如果您正在考虑使用CSS Transitions，重要的是要知道它们是非常新的并且只有非常有限的支持 - 即仅在一个或两个浏览器中，甚至不一定所有功能，或者甚至在它们之间正确兼容浏览器。

因此，如果您想要一些可靠的东西，并且可以在所有当前浏览器中使用，那么您就无法真正使用CSS。你最好的选择是使用JQuery - 这种东西在JQuery中非常简单，它可以在今天使用的每个浏览器中运行。

Answer 5

除了IE之外，最新的浏览器支持CSS Transitions和CSS Transforms所需的内容。

基于Webkit的浏览器，Firefox和Opera支持您的需求。唯一不知道IE9状态的平台是IE9，所以如果你正在创建一个普通的旧网站，那你就不走运了。

看看：

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

如果您需要迎合Internet Explorer，请查看：

• JQuery Effects