CSS, multiple animations on one element-CodePudding

I want to applay a flicker animation to one button when the page is loaded (after a small delay) AND the same animation when the button is hovered. However, only one of the animations works. When both animations are not commented out, the animation when the page is loaded works. When I comment out this animation, the hover animation works. I don't understand, why it's like that.

Here you have my code snippet:

codepen.io/mat_blu/pen/ExEKadp

Thank you very much for your support.

CodePudding user response：

I believe its probably the animation iteration... try to define it to loop on hover like -

 .btn:hover::after {
  animation: flickerButton 0.4s infinite;
}

CodePudding user response：

The problem is that the same animation keyframes are set on the actual pseudo element and when the element is hovered.

CSS reckons that once it's run the animation it doesn't need to do it again.

Assuming a CSS-only solution is required, this snippet has two copies of the keyframes, one for the non hovered condition, which runs the once, and one for when it is hovered when it runs once but then when unhovered the pseudo element doesn't have the animation set any more etc.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  height: 100vh;
  background-image: linear-gradient( to right bottom, rgba(72, 80, 92, 0.444), rgba(43, 43, 46, 0.757));
}

.btn:link,
.btn:visited {
  text-decoration: none;
  background-color: #fff;
  color: rgb(70, 70, 70);
  padding: 15px 40px;
  display: inline-block;
  border-radius: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 100px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: #fff;
  animation: flickerButton 0.4s 1s;
}

.btn:hover::after {
  animation: flickerButton1 0.4s;
}

@keyframes flickerButton {
  0% {
    transform: scaleX(1) scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
  }
}

@keyframes flickerButton1 {
  0% {
    transform: scaleX(1) scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
  }
}

<div >
  <a href="#" >Hello</a>
</div>