trigger #keyframes animation, when you hover seperate object in CSS - css

Question

What I am trying to do is when I :hover the trigger container, it should trigger the #keyframes rings on the spans, just like how it does it when you load the page.
I have a codepen link here: https://codepen.io/anon/pen/moERzj
.trigger img {
width: 140px;
border-radius: 100%;
padding: 2px;
}
.trigger {
margin: 0 auto;
position: relative;
}
.trigger > span {
border-radius: 100% / 100%;
position: absolute;
width: 140px;
height: 140px;
border: 2px solid #fff;
background: #333;
z-index: -1;
-webkit-animation: rings 1s;
-moz-animation: rings 1s;
-ms-animation: rings 1s;
-o-animation: rings 1s;
animation: rings 1s;
}
.trigger:hover > span {
-webkit-animation: rings 1s;
-moz-animation: rings 1s;
-ms-animation: rings 1s;
-o-animation: rings 1s;
animation: rings 1s;
}
.trigger > img:hover > span {
-webkit-animation: rings 1s;
-moz-animation: rings 1s;
-ms-animation: rings 1s;
-o-animation: rings 1s;
animation: rings 1s;
}
.trigger > span:nth-child(1) {
animation-delay: 0s;
}
.trigger > span:nth-child(2) {
animation-delay: 0.2s;
}
.trigger > span:nth-child(3) {
animation-delay: 0.4s;
}
#-webkit-keyframes rings {
0% {opacity: 0;transform: scale(1);}
70% {opacity: 1; transform: scale(1.3);}
100% {opacity: 0;transform: scale(1);}
}
#-moz-keyframes rings {
0% {opacity: 0;transform: scale(1);}
70% {opacity: 1;transform: scale(1.3);}
100% {opacity: 0;transform: scale(1);}
}
#-ms-keyframes rings {
0% {opacity: 0;transform: scale(1);}
70% {opacity: 1;transform: scale(1.3);}
100% {opacity: 0;transform: scale(1);}
}
#-o-keyframes rings {
0% {opacity: 0;transform: scale(1);}
70% {opacity: 1;transform: scale(1.3);}
100% {opacity: 0;transform: scale(1);}
}
#keyframes rings {
0% {opacity: 0;transform: scale(1);}
70% {opacity: 1;transform: scale(1.3);}
100% {opacity: 0;transform: scale(1);}
}
I just want to be able to trigger #keyframes rings on the spans, when I :hover something else, like the trigger div or img.

Answer 1

It is enough to add 'infinite' to your animation, so that it runs more than one time:
animation: rings 1s infinite;:
"use strict";
const element = document.getElementById("trigger");
element.addEventListener("mouseover", function(e){
element.classList.remove("animated");
void element.offsetWidth;
element.classList.add("animated");
}, false);
body { background: #333;}
#trigger {
margin: 60px auto;
padding: 30px;
position: relative;
border: 2px solid red;
width: 300px;
text-align: center;
}
#trigger * {
pointer-events: none;
}
#trigger img {
width: 140px;
border-radius: 100%;
padding: 2px;
}
#trigger.animated span {
border-radius: 100% / 100%;
position: absolute;
width: 140px;
height: 140px;
border: 2px solid #fff;
background: #333;
z-index: -1;
animation: rings 1s;
}
#trigger span:nth-child(1) {
animation-delay: 0s;
}
#trigger span:nth-child(2) {
animation-delay: 0.2s;
}
#trigger span:nth-child(3) {
animation-delay: 0.4s;
}
#keyframes rings {
0% {
opacity: 0;
transform: scale(1);
}
70% {
opacity: 1;
transform: scale(1.3);
}
100% {
opacity: 0;
transform: scale(1);
}
}
<div id="trigger" class="animated">
<span></span>
<span></span>
<span></span>
<img src="https://picsum.photos/140/140" alt="some pic">
</div>

Answer 2

I have done a tricky way which makes the run animation on hover smoothly but when you take moues out it does not end smoothly, however it full fill one thing animation on hover. One thing i noticed that .trigger img:hover span will perform nothing as spans are not child to image. Please check below pin:
Animation on hover