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]
Agradezco tu comentario 🤘