I have a button for which I have a CSS3 animation which takes effect every time the button has focus.
What the animation does is give the button a small bounce, in the same position it is in without moving it.
What I want is that every time the button is clicked, the animation is activated as if each click activates the focus on the button.
Below is an example of how I have animated the button.
.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>
If I use :active
to animate the button it works, but only if the mouse is positioned over the button, which if moved stops the animation.
That's why I use :focus
to animate the button.
But as I explained I would like to achieve the effect every time the button is clicked, that is, each click will trigger the animation on the button, regardless of whether the mouse is hovered over the button or not.
Use the event
click
and just remove and add back the class that starts the animation. Notice that I add a 0.1s delay to wait for the repainting of the document.