CODEWITHSUNDEEP
javascripthtmlcssxhtmlanimation
Zakman411
Zakman411

Reputation: 1764

HTML Buttons with animations

I'm trying to create several buttons that have 4-5 frames of animation in them, and rather than using the typical CSS method (where 1 image has both states, and CSS toggles between top and bottom), I was curious if anyone had an idea on how to do this with 4-5 frames rather than 2. Obviously CSS alone can't make this happen - but its becoming a real challenge to find ANY info on this. Because the images have individual animation, I can't simply use the opacity to fade into the new image, it has to contain all 4-5. Any help would be much appreciated!

Zach

Upvotes: 0

Views: 157

Answers (4)

jesse hampton
jesse hampton

Reputation: 1

A very non-traditional frowned upon way this can be done is to...

-Animate them as a flash object. Export the xml/flash and imbed it into the htm

Upvotes: 0

FatherStorm
FatherStorm

Reputation: 7183

for this you'll need to use an animated GIF. if you don;'t have a animated GIF creation tool installed, either use Photoshop, which may be massive overkill, or one fo the free tools like GIFted motion

Upvotes: 1

Caspar Kleijne
Caspar Kleijne

Reputation: 21864

have a look at k10k and see how the buttons in the top are done: animated png's and animated gifs ;)

png gif

Upvotes: 1

Jacob
Jacob

Reputation: 78840

The only way I can think of to do this without JavaScript would be for the hover state to load an animated GIF for the background image. Otherwise, you'd have to use something like jQuery to animate the background-position property instead.

Upvotes: 1

Related Questions