Как сделать такую анимацию стрелки?

Question

[Kamil]

Стрелка сначала должна расширится вправо(хвост стрелки по ширине увеличивается, тем самым толкая стрелку - это я сделал). А потом хвост этой стрелки должен уменьшится как то слева направо(при этом стрелка остается в правом положении). И такую анимацию повторять надо раз в несколько секунд.

Смог пока только расширение стрелки сделать. Теперь как-то хвост стрелки надо тянуть за ней:
Мой код на codepen:

Comments

[Алан Гибизов]

Пользуйтесь кнопкой + для вставки codepen

[Kamil]

Алан Гибизов, хорошо, буду знать

Answer 1

[Александр]

@keyframes arrow {
  0% {
    width: 60px;
  }
  
  25% {
    width: 260px;
    transform: translateX(0px);
  }
  
  50%, 75% {
    width: 60px;
    transform: translateX(200px);
  }
}

Comments

[Kamil]

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

[Модератор]

Kamil, в одном вопросе - один вопрос.

[Kamil]

Модератор, так этот вопрос и был в начале)

[Александр]

Kamil,

.arrow div {
  animation-duration: 7s;
}

@keyframes arrow {
  12.5% {
    width: 60px;
  }
  
  25% {
    width: 260px;
    transform: translateX(0px);
  }
  
  37.5%, 50% {
    width: 60px;
    transform: translateX(200px);
  }
  
  87.5% {
    transform: translateX(200px);
  }
  
  100% {
    transform: translateX(0px);
  }
}

поиграйтесь с параметрами.