How to animate an element with CSS every time it is clicked?

Question

How to animate an element with CSS every time it is clicked?

Navigation

#1 by (3 votes)

1

I have a button which I have an animation with CSS3 which goes into effect every time the button has the focus.

What the animation does is give a small bounce to the button, in its same position that is without moving it.

What I'm looking for is that each time the button is clicked, the animation is activated as if each click activated the focus on the button.

Here 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 on the button, which if it moves, the animation stops.

That's why I use :focus to animate the button.

But as I explained I would like to achieve the effect whenever the button is clicked, that is, each click will activate the animation on the button, regardless of whether the mouse is left on the button or not.

html css

asked by M4uriXD 08.11.2018 в 21:13

source

1 answer

How can I improve the performance of the next query? ... it takes too long to get the result Format MySQL date (d-m-Y) - (Y-m-d)

score 3 · Accepted Answer

Use the click event and simply delete and add again the class that starts the animation. Notice that I added delay 0.1s to wait for the repaint of the document.

const btn = document.querySelector('.btn_animated')
btn.addEventListener('click', () => {
  btn.classList.remove('animate')
  setTimeout(() => btn.classList.add('animate'), 100)
})

.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: 1cm;
  margin-top: 1cm;
}
.btn_animated.animate {
  -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);
      }
  }

<button class="btn_animated">CLICKEAME</button>