How to create an icon with animated hover

You can find icons of this type at Metro Icon Font at home page you can download it as well as grab the icons separately, and it has instructions on how to use it.

You can also be doing animations with icons through CSS, even with DIV, page elements etc ...

For this you should use the animation parameter of css.

Example

.animar-algo {
    animation: ani-ring 2s ease infinite;
}

In this case the element you apply this CSS, will be swaying like a bell without stopping. To add the effects only when the mouse over, use hover .

.animar-algo:hover

The order I used is as follows:

ani-ring 2s ease infinite

nome do efeito tempo de duração função da cronometragem

  

infinite is for the effect to be infinite and not stop

There are more examples in the Metro Icon Font at the bottom of the page there are more examples that you might be inspecting element to see how the effect is done.

See here Hover.css. It is a package of several icons with this effect. Home Download the package he has the instructions how to use, it's quite simple.