CSS3: efecto temblor

A continuación un ejemplo en css3 para conseguir un efecto temblor / vibración de un elemento, en este caso podéis ver un demo situándote encima del logo de bufa.es.

Es un ejemplo básico, que podéis customizar a vuestro gusto… en este caso hago uso del valor rotateZ para girar el elemento 5 degrees …y de scale para escalarlo un 0.8%, en una animación que he llamado «tiembla»:

.logo{
	width:332px;
	height:30px;
	background: red;
}
.logo:hover{
	-webkit-animation: tiembla 0.1s infinite;
}
@-webkit-keyframes tiembla{
	0%  { -webkit-transform:rotateZ(-5deg); }
	50% { -webkit-transform:rotateZ( 0deg) scale(.8); }
	100%{ -webkit-transform:rotateZ( 5deg); }
}

* Esta demo solo funcionara en navegadores con motor Webkit (Chrome, Safari, Opera…), para utilizarlo en otro navegador (firefox, IE, opera…) debéis utilizar o añadir el/los prefijos css correspondientes.

[demo]