CODEWITHSUNDEEP
htmlcss
Bin Floo
Bin Floo

Reputation: 9

Can use animation only once css

I want to make a pulse animation when clicking a button: enter image description here This is how it looks like in the middle of the animation. So when I click the button the animation is played. But only once. So when I click the button again, nothing happens. But you can "RESET" the animation when clicking on somewhere also except the button. But I dont want this so everytime I press the button the animation plays.

There is no java-script

.pulse:focus,
.pulse:active {
  -webkit-animation: pulse 1s;
  animation: pulse 1s;
  box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
}

@-webkit-keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--hover);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--hover);
  }
}
.pulse {
  --color: #ef6eae;
  --hover: #ef8f6e;
  width: 300px;
  height:40px;
  text-align: middle;
  color: #01cfa9;
  background: none;
  border: 2px solid;
  font: inherit;
  line-height: 1;
  margin: 0.5em;
  background: #17181c;
}
<button style="text-align:center" class="pulse">INVITE NOW!!</button>

Upvotes: 0

Views: 143

Answers (1)

Sektowr
Sektowr

Reputation: 366

You need remove focus from that Button after the animation played completely , by this script:

 <button style="text-align:center" class="pulse" onclick="blurInput()">INVITE NOW!!</button>
    <script>
        function blurInput() {
            setTimeout(() => {
                document.getElementsByClassName('pulse')[0].blur();
            }, 1000);
        }
    </script>

the second parameter of setTimeout = your animation time in css

Upvotes: 2

Related Questions