1

Tengo el siguiente enlace con una icono al lado izquierdo. Quiero agregarle el efecto de que cuando se de al enlace solo vibre la imagen con la clase vibrar. Asi como lo tengo solo se aplica el efecto cuando le doy click encima de la imagen.

.vibrar:active{
  -webkit-animation: tiembla 0.2s 1;
  -moz-animation: tiembla 0.2s 1;
  -o-animation: tiembla 0.2s 1;
 -ms-animation: tiembla 0.2s 1;
}
@-webkit-keyframes tiembla{
  0%  { -webkit-transform:rotateZ(-5deg); }
  50% { -webkit-transform:rotateZ( 0deg) scale(1.4); }
  100%{ -webkit-transform:rotateZ( 5deg); }

}

<li><a class="opcionmenu" id="verclientes" data-toggle="modal" data-target="#modalverclientes"> <img class="vibrar" src="~/Content/img/Ojo.png" /> Ver Clientes</a></li>

2 respuestas 2

2

El error esta en la definición de la clase. Estas indicando que la animación se realice sobre el elemento con clase .vibrar este :active. Es decir, cuando el tag img este activo.

Solución:

Asignar la clase .vibrar al tag a e indicar que la animación se realice cuando este elemento este :active, se anime el elemento con clase, por ejemplo .icono.

.icono {
  height: 15px;
}
.vibrar:active .icono {
  -webkit-animation: tiembla 0.2s 1;
  -moz-animation: tiembla 0.2s 1;
  -o-animation: tiembla 0.2s 1;
 -ms-animation: tiembla 0.2s 1;
}
@-webkit-keyframes tiembla {
  0%  { -webkit-transform:rotateZ(-5deg); }
  50% { -webkit-transform:rotateZ( 0deg) scale(1.4); }
  100%{ -webkit-transform:rotateZ( 5deg);
}
<li>
  <a class="opcionmenu vibrar" id="verclientes" data-toggle="modal" data-target="#modalverclientes">
    <img class="icono" src="http://us.cdn3.123rf.com/168nwm/darrenwhi/darrenwhi0803/darrenwhi080300023/2694785-ilustracion-de-dibujos-animados-en-blanco-y-negro-ojos.jpg" />
    Ver Clientes
  </a>
</li>

0

La solución es reemplazar 'active' por la pseudo clase ':hover' y aplicar la clase 'vibrar' al enlace (el elemento <a>). Esto hará vibrar todo (imagen y enlace). En caso que al pasar sobre el enlace, vibre la imagen, hay que modificar mucho más.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.