Most effective way to have animated icons…

[KungPaoKitties]

Hi all, I’m a web designer novice and I am wanting a simple icon that is animated over hover. Nowadays I see there are things such as CSS3 animations, HTML canvas, etc. and I am not too sure which method to use. An example of what I am talking about can be found here:

https://mega.co.nz/

[Paulie_D]

If it’s just a hover state then you want a ‘transition’ more than likely.

What you use to build the ‘icon’ will depend on how complex the icons is.

SVG is the current flavour of the month though.

[nixnerd]

Yeah… it all depends on what you want the icon to do. If it’s like a little bird flapping its wings… you’re gonna need SVG.

[KungPaoKitties]

I am trying to achieve a circular logo that expands over hover and then contracts when not hovered and I want an actual animation applied to it not just one to the other. I want it to gradually expand and then contract so I assume SVG is the way to go? Any good (simple) tutorials out there that delve deeper into SVG animations?

[Paulie_D]

You’re probably overthinking it.

A simple div with a 50% border radius that scales on hover

http://jsfiddle.net/sw3fvgjx/5/

[chrisburton]

Like this?:

Edit: Paulie_D has it.

[KungPaoKitties]

Ahhh okay! Definitely was over-thinking it. Got most of everything kosher however I am having an odd issue that is creating an annoying blur as it transitions. Anyway to fix this?

http://jsfiddle.net/r6x3pwt2/14/

[Jando Jando]

In what browser? Don’t see it in firefox.

[Author]

Posts