I have a series of nested circle divs, and I want to give them a pulse animation. The issue is that the text container is within one of these circles, causing the animation to apply to the text as well. I am unable to move the text container due to potential complications it may cause. Unfortunately, I cannot share the actual project example due to copyright restrictions. Is there a way to resolve this without adjusting the position of the text?
I attempted the following solution but was unsuccessful in manipulating the inner circle's animation:
.myText{ animation-play-state: paused;}
#first-circle{border-radius:50%;width:643px;height:643px;position:absolute;top:0;left:0;border:1px solid #000;-webkit-animation: pulsate 1s ease-out;-webkit-animation-iteration-count: infinite;}
#second-circle{position:absolute;border-radius:50%;border:1px solid #000;width:508px;height:508px;top:50%;left:50%;margin:-254px 0 0 -254px}
#third-circle{position:absolute;width:382px;height:382px; border:1px solid #000;border-radius:50%;top:50%;left:50%;margin:-191px 0 0 -191px}
#fourth-circle{position:absolute;width:254px;height:254px;border:1px solid #000;border-radius:50%;top:50%;left:50%;margin:-127px 0 0 -127px}
#fifth-circle{position:absolute;font-size:14px;width:128px;height:128px;text-align:center;border:1px solid #000;border-radius:50%;top:50%;left:50%;margin:-64px 0 0 -64px}
.myText{
margin-top:55px;
}
@-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
} <div id="first-circle" >
<div id="second-circle" >
<div id="third-circle" >
<div id="fourth-circle" >
<div id="fifth-circle" >
<div class="myText">
My Text
</div>
</div>
</div>
</div>
</div>
</div>