Анимация исчезновения и появления стрелок в SVG

#css #html5 #svg #css_animation #svg_animation

У меня есть SVG, который состоит из 5 стрелок. Я хочу сделать последовательное исчезновение
 каждой стрелки, снизу вверх для каждой стрелки. 

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

Здесь мой код на Codepen        







    

Ответы

Ответ 1

Вариант с css @keyframes и animation-delay






Ответ 2

Ещё два примера использования задержек  с помощью keyTimes в SVG, и в css animation-delay.  

SVG Loader

Принцип работы абсолютно такой же как в первом примере 








CSS Loader



body {
  background-color: #1d1f20;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
}

.sk-wave {
  width: 240px;
  height: 20px;
  margin: auto;
  text-align: center;
}

.sk-wave .sk-circle {
  background-color: #337ab7;
  height: 20px;
  width: 20px;
  border-radius:50%;
  display: inline-block;
  -webkit-animation: sk-wave-stretch-delay 1.2s infinite ease-in-out;
          animation: sk-wave-stretch-delay 1.2s infinite ease-in-out;
}

.sk-wave .sk-circle-1 {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}

.sk-wave .sk-circle-2 {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s;
}

.sk-wave .sk-circle-3 {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}

.sk-wave .sk-circle-4 {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}

.sk-wave .sk-circle-5 {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}

.sk-wave .sk-circle-6 {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}

.sk-wave .sk-circle-7 {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}

.sk-wave .sk-circle-8 {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}

.sk-wave .sk-circle-9 {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}

.sk-wave .sk-circle-10 {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}

@-webkit-keyframes sk-wave-stretch-delay {
  0%, 40%, 100% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
			opacity: 0.4; 
  }

  20% {
    -webkit-transform: scale(1);
            transform: scale(1);
			opacity: 1; 
  }
}

@keyframes sk-wave-stretch-delay {
  0%, 40%, 100% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
			opacity: 0.4;
  }

  20% {
    -webkit-transform: scale(1);
            transform: scale(1);
			opacity: 1;
  }
} 

    

    

    

    

    

    

    

    

    

    

  




Источник ответа: @Alexandr_TT


Ответ 3

Самое простое решение - использовать атрибут keyTimes для управления временем появления
и исчезновения.
У нас есть пять стрелок. Анимация первой из них занимает одну секунду, чтобы появиться,
затем ждет, пока другие четыре исчезнут. Затем требуется одна секунда, чтобы исчезнуть
снова, и ждет, пока остальные четыре сделают то же самое.   

Это означает, что анимация занимает всего 10 секунд для каждой стрелки. И в этой
анимации пять ключевых моментов:  


при 0сек. значение непрозрачности равно 0
при 1сек., значение непрозрачности равно 1
при 5сек., значение непрозрачности равно 1
при 6сек., значение непрозрачности равно 0
при 10сек., значение непрозрачности равно 0     


Атрибут keyTimes работает в сочетании с атрибутом values.
 Он указывает, в какое время в анимации непрозрачность должна быть при каждом значении. 

Таким образом, он должен иметь то же количество значений, что и в атрибуте values.  

Еще одна вещь, которую вы должны знать о значениях keyTimes, это то, что значения
времени должны быть в долях от длительности.  

Когда во второй раз анимация больше (1s ), мы должны использовать 0,1 (1s 10s). 
 Таким образом, наш атрибут values должен быть "0; 1; 1; 0; 0", а наш атрибут keyTimes
будет "0; 0,1; 0,5; 0,6; 1".    








Источник ответа: @Paul LeBeau