Animate a button's image when focused, using CSS

Question

I know I can make my button's image bigger when it is focused using a css like:

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

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

But, is there a way to make the image grow gradually (like an animation effect)?

Answer 1

You cant do animation with current css and html alone. I will recommend jquery instead of css. you can do with html5 but as html5 is not supported by all browsers.

Answer 2

CSS Transitions make this possible, but have only appeared in draft specifications recently so browser support is weak.

As this is a cosmetic effect, I would probably be happy with the limited support. YMMV, so if you aren't then you will need to look to JavaScript to achieve this. There are various libraries that make animation easier.

Answer 3

I did this once using an animated .gif as the focusing image (and a reverse animated .gif to go back). It worked ok but was prone to choppiness when a mouse appeared over the link briefly.

Answer 4

If you want to do this in CSS (as implied in the question), you can do so using CSS Transitions. This is often mistakenly referred to as being part of HTML5 - it isn't; it's part of CSS. But the distinction is often blurred as they are both new and support for them is being brought into browsers together.

If you are considering using CSS Transitions though, it is important to know that they are very new and only have very limited support - ie only in one or two browsers, and even then not necessarily all features, or even properly compatible between browsers.

So if you want something that will be reliable, and will work in all current browsers, then you can't really use CSS. Your best bet would be to use a JQuery - this sort of thing is pretty easy in JQuery, and it works in every browser in use today.

Answer 5

Most recent browsers, except IE, support what you need from CSS Transitions and CSS Transforms.

Webkit based browsers, Firefox and Opera support what you need. The only platform I don't know the status of is IE9, so if you're creating a plain old webside you're out of luck.

Have a look at:

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

If you have to cater to Internet Explorer take a look at:

• JQuery Effects