Tengo un botón el cual le tengo una animación con CSS3 la cual entra en efecto cada vez que el botón tiene el foco.
Lo que hace la animación es dar un pequeño rebote al botón, en su misma posición que se encuentre sin desplazarlo.
Lo que busco es que por cada vez que se haga clic en el botón se active la animación como si cada clic activase el foco en el botón.
A continuación dejo un ejemplo de como tengo animado el botón.
.btn_animated2{
background-color: rgba(0,0,0,0.5);
color: white;
border-color: black;
height: 9mm;
width: 30%;
outline-style: none !important;
margin-left: 2mm;
}
.btn_animated2:active{
-webkit-animation: jello-horizontal 0.5s both;
animation: jello-horizontal 0.5s both;
}
.btn_animated{
background-color: rgba(0,0,0,0.5);
color: white;
border-color: black;
height: 8mm;
width: 25%;
outline-style: none !important;
margin-left: 2mm;
}
.btn_animated:focus{
-webkit-animation: jello-horizontal 0.5s both;
animation: jello-horizontal 0.5s both;
}
@-webkit-keyframes jello-horizontal {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
<b>Con :focus</b><br><br>
<button class="btn_animated">CLICKEAME!!</button><br><br>
<b>Con :active (manteniendo un poco el mouse por cada clic)</b><br><br>
<button class="btn_animated2">CLICKEAME!!</button>
Si uso :active
para animar el botón funciona, pero solo si el mouse esta posicionado sobre el botón, lo cual si se mueve se detiene la animación.
Es por eso que uso :focus
para animar el botón.
Pero como expliqué me gustaría lograr el efecto siempre que se haga click en el botón, es decir, cada clic activará la animación en el botón, independientemente si se deja posicionado el mouse sobre el botón o no.