Анимировать элементы SVG по очереди

Question

Есть SVG иконка клавиатуры калькулятора из 4 кнопочек. Каждая кнопочка это отдельный элемент <g>

<svg width="80px" height="80px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g class="blink1">
    <path d="M2.29956 5.64014H9.57956" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g class="blink2">
    <path d="M14.4207 5.63965H21.7007" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M18.0894 9.27V2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g class="blink3">
    <path d="M2.29956 22L9.57956 14.73" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M9.57956 22L2.29956 14.73" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g class="blink4">
    <path d="M14.4207 15.3301H21.7007" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M14.4207 21.3896H21.7007" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>

Нужно анимировать их, чтобы они меняли цвет с #4f46e5 на #111827 по очереди (то есть, каждый момент времени #111827 была только одна кнопочка). CSS у меня такое пока что:

    @keyframes blink {
      0% {
        stroke: #4f46e5;
      }
      50% {
        stroke: #111827;
      }
      100% {
        stroke: #4f46e5;
      }
    }

Дальше я запуталсо. Нужно подобрать продолжительность и очередность анимации, у меня же они мигают беспорядочно.

    .blink1 {animation: blink 1s infinite;animation-delay: 1s;}
    .blink2 {animation: blink 1s infinite;animation-delay: 2s;}
    .blink3 {animation: blink 1s infinite;animation-delay: 3s;}
    .blink4 {animation: blink 1s infinite;animation-delay: 4s;}

Прошу вашей помощи.

.blink1 {
  animation: blink 1s infinite;
  animation-delay: 1s;
}

.blink2 {
  animation: blink 1s infinite;
  animation-delay: 2s;
}

.blink3 {
  animation: blink 1s infinite;
  animation-delay: 3s;
}

.blink4 {
  animation: blink 1s infinite;
  animation-delay: 4s;
}

@keyframes blink {
  0% {
    stroke: #4f46e5;
  }

  50% {
    stroke: #111827;
  }

  100% {
    stroke: #4f46e5;
  }
}

<svg width="80px" height="80px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g class="blink1">
        <path d="M2.29956 5.64014H9.57956" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    <g class="blink2">
        <path d="M14.4207 5.63965H21.7007" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M18.0894 9.27V2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    <g class="blink3">
        <path d="M2.29956 22L9.57956 14.73" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M9.57956 22L2.29956 14.73" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    <g class="blink4">
        <path d="M14.4207 15.3301H21.7007" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M14.4207 21.3896H21.7007" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    </svg>

Answer 1

Обычный smil делаем анимацию на smil и зацикливаем её ...

Если что то не ясно пишите комментарий попробую ответить

svg{
  fill: none;
  width: 80px;
  height: 80px;
}
path{
  stroke:  #4f46e5;
  stroke-width: 1.5px;
  stroke-linecap: round; 
  stroke-linejoin: round;
}

<svg viewBox="0 0 24 24" id="svg" xmlns="http://www.w3.org/2000/svg">

<g>
   <path d="M2.29956 5.64014H9.57956">
   <animate id="g1" attributeName="stroke" dur="1s" to="#000000"  from="#111827" begin="0s; g4.end" repeatCount="0" />
  <path />
</g>
  
<g>
    <path d="M14.4207 5.63965H21.7007 M18.0894 9.27V2" >
     <animate id="g2" attributeName="stroke" dur="1s" to="#000000"  from="#111827" begin="g1.end" repeatCount="0" />    
    </path>
    
</g>
  
<g>
    <path d="M2.29956 22L9.57956 14.73 M9.57956 22L2.29956 14.73" >
      <animate id="g3" attributeName="stroke" dur="1s" to="#000000"  from="#111827" begin="g2.end" repeatCount="0" />      
    </path>

</g>
  
<g>
    <path d="M14.4207 15.3301H21.7007 M14.4207 21.3896H21.7007" >
      <animate id="g4" attributeName="stroke" dur="1s" to="#000000"  from="#111827" begin="g3.end" repeatCount="0" /> 
    </path>
    
</g>
  
</svg>

Answer 2

Не установлено начальное значение свойства, поэтому вначале элементы не отображаются
animation-delay откладывает только запуск анимации, и не работает между итерациями.

Чтобы исправить это, нужно увеличить общее время анимации, но уменьшить в нем фреймы самой анимации:

для примера с четырьмя элементами, время увеличивается в 4 раза и становится 4s, при этом, чтобы сама анимация осталась длительностью 1s - она должна выполняться только первую четверть времени:

@keyframes blink {
  0% {
    stroke: #4f46e5;
  }

  12.5% {
    stroke: #111827;
  }

  25% {
    stroke: #4f46e5;
  }
}

.blink1 {
  animation: blink 4s infinite;
  animation-delay: 1s;
}

.blink2 {
  animation: blink 4s infinite;
  animation-delay: 2s;
}

.blink3 {
  animation: blink 4s infinite;
  animation-delay: 3s;
}

.blink4 {
  animation: blink 4s infinite;
  animation-delay: 4s;
}

@keyframes blink {
  0% {
    stroke: #4f46e5;
  }

  12.5% {
    stroke: #111827;
  }

  25% {
    stroke: #4f46e5;
  }
}

<svg width="80px" height="80px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g class="blink1" stroke="#4f46e5">
        <path d="M2.29956 5.64014H9.57956" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    <g class="blink2" stroke="#4f46e5">
        <path d="M14.4207 5.63965H21.7007" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M18.0894 9.27V2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    <g class="blink3" stroke="#4f46e5">
        <path d="M2.29956 22L9.57956 14.73" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M9.57956 22L2.29956 14.73" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    <g class="blink4" stroke="#4f46e5">
        <path d="M14.4207 15.3301H21.7007" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M14.4207 21.3896H21.7007" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    </svg>

БЛОГ НА HUSL

Анимировать элементы SVG по очереди

Ответы (2 шт):