Как выбрать указанный c путь svg с тем же селектором?

Question

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

1. Анимация действительно происходит, как и предполагалось в первом элементе списка.
2. Ошибка вообще не существует в мобильном браузере и Safari для Ma c OS x.
3. Я заключил каждый элемент в ": host", чтобы сохранить инкапсуляцию css. каждый «облачный контейнер» находится в отдельном div

Вы можете попробовать изучить себя здесь (введите в поиске «пицца»)

Конечное положение

HTML

<div class="cloud-container">
<!-- Step 1: Cloud with arrow - static icon -->
<svg-icon
  class="cloud-one cloud-img"
  src="../../assets/cloud-arrow-icon.svg"
  [class.active]="isActive"
></svg-icon>

<!-- Step 2: Cloud with arrow mask -> animated translateY trough css -->
<svg-icon
  class="cloud-two cloud-img"
  src="../../assets/cloud-arrow-masked.svg"
  [class.active]="isActive"
></svg-icon>

<!-- Step 3: Cloud with check mark masked (also) final cloud
      -> animated with Scale trough css -->
<svg-icon
  class="cloud-three cloud-img check-scale"
  src="../../assets/cloud-check-icon.svg"
  [class.active]="isActive"
></svg-icon>

<!-- Step 4: Arrow only dropping from cloud -->
<span class="cloud arrow-only-container" [class.active]="isActive">
  <svg-icon
    class="cloud arrow-only"
    [class.active]="isActive"
    src="../../assets/arrow-icon.svg"
  ></svg-icon>
</span>

Cloud S CSS

:host .cloud {

  &-container {
    position: absolute;
    @include size($item-size);
    opacity: 0;
    pointer-events: none;
    transition: all 0.6s;
    top: 0;
  }

  &-img {
    margin: 55px 47px;
    position: absolute;
  }

  &-one {
    opacity: 1;
    &.active {
      opacity: 0;
    }
  }

  &-two {
    opacity: 0;
    &.active {
      animation: reveal;
      animation-duration: 1s;
      path.arrow {
        animation: arrow-down-cloud 1s;
        animation-iteration-count: 1;
        transform-origin: 50% 50%;
      }
    }
  }

  &-three {
    opacity: 0;
    &.active {
      animation: hide;
      animation-duration: 1s;
      opacity: 1;
      .check-mark {
        animation: check-mark-scale 1s;
        animation-iteration-count: 1;

        animation-delay: 1s;
      }
    }
  }

  &.arrow-only {
    &-container {
      width: 20px;
      height: 23px;
      overflow: hidden;
      top: 93px;
      left: 64px;
      position: absolute;
      transition-duration: 1s;
      transition-delay: 0.3s;
      &.active {
        transform: translateY(155px);
      }
    }

    transform-origin: top;
    position: absolute;
    top: -27px;
    right: 0;
    transition: all 0.32s;
    &.active {
      transform: translateY(27px);
    }
  }
}

можно найти остальной код