Как повторить анимацию через несколько секунд?

Question

У меня есть изображение движущейся руки, указывающей на электронное письмо.Рука оживляет и указывает на электронную почту.Проблема в том, что я не знаю, как повторить анимацию через несколько секунд.Мой код:

  .hand {
    position: absolute;
    bottom: 30px;
    right: 900px;
  }

  .element {
    position: relative;
    top: 0;
    left: 0;
    animation-name: zigzag;
    animation-duration: .6s;
    animation-timing-function: ease-in;
  }

  .element-2 {
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  @keyframes zigzag {
    from {
      left: 0;
      top: 0;
    }

    100% {
      left: 50px;
      top: 20px;
    }
  }

и в HTML

 <div class="element element-2"><img class="hand" src="/images/career/hand.png"></div>

Мой вопрос: как запустить анимацию через несколько секунд?

Answer 1

Время Dvide в @keyframes - % также вычисляет animation-duration = время, в которое вы хотите анимацию + время ожидания

как в этом примере анимация работает за 1 первую секунду (2 с / 50%), затем подождите до 100%

 .hand {
    position: absolute;
    bottom: 30px;
    right: 900px;
  }

  .element {
    position: relative;
    top: 0;
    left: 0;
    animation-name: zigzag;
    animation-duration: 2s;
    animation-timing-function: ease-in;
  }

  .element-2 {
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  @keyframes zigzag {
    0%{
      left: 0;
      top: 0;
    }

    50% {
      left: 0;
      top: 0;
    }
    100%{
      left: 50px;
      top: 20px;
    }
  }

 <div class="element element-2"><img class="hand" src="/images/career/hand.png"></div>