Как остановить анимацию webkit внутри div внутреннего круга?

Question

У меня есть пять вложенных кружочков, и я хочу дать им импульсную анимацию. У меня также есть текстовый контейнер, который находится на пятом делении, поэтому, когда я даю css класс анимации первому внешнему кругу, он применяется ко всем вложенным, и я Я не хочу, чтобы он был применен к моему текстовому контейнеру.

К сожалению, я не могу изменить положение myText div, потому что, когда я изменю его, его перемещение будет очень большой проблемой. Я не могу поделиться точно реальным примером моего проект из-за проблем с авторским правом. Я должен найти решение, не меняя его положение. Есть ли в любом случае, чтобы сделать это?

Я пробовал что-то вроде ниже, но не сработало, так как я не могу управлять анимацией внутри внутреннего круга

.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>
     

Answer 1

Сделайте это по-другому, используя меньше элементов.

.box {
  margin:150px;
  display:inline-block;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:500%;
  padding-top:500%;
  border:2px solid; /* 1 circle here */
  border-radius:50%;
  /* 3 circles here */
  background:
    radial-gradient(farthest-side,transparent 75%,#000 calc(75% + 1px) calc(75% + 2px),transparent calc(75% + 3px)),
    radial-gradient(farthest-side,transparent 50%,#000 calc(40% + 1px) calc(50% + 2px),transparent calc(50% + 3px)),
    radial-gradient(farthest-side,transparent 25%,#000 calc(25% + 1px) calc(25% + 2px),transparent calc(25% + 3px))
    /* to add another circle
    radial-gradient(farthest-side,transparent X%,#000 calc(X% + 1px) calc(X% + 2px),transparent calc(X% + 3px))*/;
  animation:pulsate 1s linear infinite; 
}

@keyframes pulsate {
  0% {
    transform: translate(-50%,-50%) scale(0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%,-50%) scale(1.2);
    opacity: 0;
  }
}

<div class="box">
  some text
</div>

В вашем случае вы используете вложенные элементы, и эффект масштаба внешнего элемента повлияет на все внутренние, и вы не можете отключить это.