A imagem vai ficar com este efeito:
Você também vai aprender no tutorial a como utilizar quando o efeito apenas para hover.
1. Primeiro, cole o código abaixo antes de </head> no seu código HTML.
<link href="http://sugar-dance.org/shake.css" rel="stylesheet" type="text/css">
2. Depois, cole o código abaixo no seu CSS.
.shake { -webkit-animation: shake 1500ms alternate infinite linear; -moz-animation: shake 1500ms alternate infinite linear; }
1500 é o tempo em milisegundos e pode ser alterado. Quanto maior for o número, mais rápido é a velocidade em que a imagem vai se mover.
3. E para utilizar na imagem que você deseja, é só utilizar o código:
<img src="http://link_da_imagem.com" class="shake">
EFEITO HOVER
Para isso, é só alterar o CSS para isso:
.shake { -webkit-animation: none; -moz-animation: none; } .shake:hover { -webkit-animation: shake 1500ms alternate infinite linear; -moz-animation: shake 1500ms alternate infinite linear; }
E então, o efeito ficará assim (passe o mouse):
Espero que gostem e, qualquer dúvida, consultem o ask-me.
Obrigada ao Great Help.