Анимация нескольких экземпляров одной и той же CSS анимации

Question

Вот попытка анимировать три экземпляра анимации одного перекрестного знака. Перекрестная анимация работает хорошо, если у меня есть только один экземпляр , но когда я пытаюсь создать более одного экземпляра, я не могу заставить его работать. Кроме того, я не могу найти решение для контроля размера и положения перекрестных анимаций. Чего мне не хватает?

Вот моя попытка: (Допустим, я хочу анимировать второй кросс-триггерB)

$("button").click(function(){
    $(".triggerB").toggleClass("drawn")
});

.container {
  width: 50%;
  max-width: 250px;
  margin: 0 auto;
}

.cross1{
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    -webkit-transition: stroke-dashoffset 1s 0.8s ease-out;
    -moz-transition: stroke-dashoffset 1s 0.8s ease-out;
    -ms-transition: stroke-dashoffset 1s 0.8s ease-out;
    -o-transition: stroke-dashoffset 1s 0.8s ease-out;
    transition: stroke-dashoffset 1s 0.8s ease-out;
}
.cross2{
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    -webkit-transition: stroke-dashoffset 1s 0.5s ease-out;
    -moz-transition: stroke-dashoffset 1s 0.5s ease-out;
    -ms-transition: stroke-dashoffset 1s 0.5s ease-out;
    -o-transition: stroke-dashoffset 1s 0.5s ease-out;
    transition: stroke-dashoffset 1s 0.5s ease-out;
}
.drawn + svg .path{
    opacity: 1;
    stroke-dashoffset: 0;
}

.triggerA {
  left:100px;
}

.triggerB {
  left:400px;
}
.triggerC {
  left:700px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="triggerA"></div>
<div class="triggerB"></div>
<div class="triggerC"></div>
  
<svg version="1.1" id="tick" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 37 37" style="enable-background:new 0 0 37 37;" xml:space="preserve">

<polyline class="cross1 path" style="fill:none;stroke:#fc1c03;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;" points="
	 12.5,24.5 24.5,12.5 "/>
  
  <polyline class="cross2 path" style="fill:none;stroke:#fc0303;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;" points="
	 12.5,12.5 24.5,24.5 "/>
</svg>
  
</div> 
<button>go/reset</button>

Я хочу использовать это:

$("button").click(function(){
    $(".triggerA").toggleClass("drawn")
    $(".triggerB").toggleClass("drawn")
    $(".triggerC").toggleClass("drawn")
});

Answer 1

$("button").click(function(){
    $(".triggerB").toggleClass("drawn")
});

.container {
  width: 50%;
  max-width: 250px;
  margin: 0 auto;
}

.cross1{
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    -webkit-transition: stroke-dashoffset 1s 0.8s ease-out;
    -moz-transition: stroke-dashoffset 1s 0.8s ease-out;
    -ms-transition: stroke-dashoffset 1s 0.8s ease-out;
    -o-transition: stroke-dashoffset 1s 0.8s ease-out;
    transition: stroke-dashoffset 1s 0.8s ease-out;
}
.cross2{
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    -webkit-transition: stroke-dashoffset 1s 0.5s ease-out;
    -moz-transition: stroke-dashoffset 1s 0.5s ease-out;
    -ms-transition: stroke-dashoffset 1s 0.5s ease-out;
    -o-transition: stroke-dashoffset 1s 0.5s ease-out;
    transition: stroke-dashoffset 1s 0.5s ease-out;
}
.drawn ~ svg .path{
    opacity: 1;
    stroke-dashoffset: 0;
}

.triggerA {
  left:100px;
}

.triggerB {
  left:400px;
}
.triggerC {
  left:700px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="triggerA"></div>
<div class="triggerB"></div>
<div class="triggerC"></div>
  
<svg version="1.1" id="tick" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 37 37" style="enable-background:new 0 0 37 37;" xml:space="preserve">

<polyline class="cross1 path" style="fill:none;stroke:#fc1c03;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;" points="
	 12.5,24.5 24.5,12.5 "/>
  
  <polyline class="cross2 path" style="fill:none;stroke:#fc0303;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;" points="
	 12.5,12.5 24.5,24.5 "/>
</svg>
  
</div> 
<button>go/reset</button>

Это проблема CSS. Попробуйте использовать ~ для замены +

.drawn ~ svg .path{
    opacity: 1;
    stroke-dashoffset: 0;
}