CSS, multiple animations on one element - css

Question

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.
HTML Code:
<div class="container">
Hello
</div>
CSS Code:
* {
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: flickerButton 0.4s;
}
#keyframes flickerButton {
0% {
transform: scaleX(1) scaleY(1);
opacity: 1;
}
100% {
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
}
Thank you very much for your support.

Answer 1

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 class="container">
Hello
</div>

Answer 2

You need to define the animation-iteration-count on the pseudo element. It's inheriting the default of running once (which happens on page load).
You can share the key-frames of flickerButton, but need to define infinite on the pseudo element so that it will loop forever on hover. You can do it shorthand on the single animation property, as follows:
.btn:hover::after {
animation: flickerButton 0.4s infinite;
}