Css 如何在几秒钟后重复动画？

我有一个移动的手指向电子邮件的图像。该手制作动画并指向电子邮件。问题是我不知道如何在几秒钟后重复动画。我的代码：

  .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>

---

我的问题：几秒钟后如何运行动画？

关键帧中的Dvide time-

%

还要计算

动画持续时间

=您想要动画的时间+等待时间

在本例中，动画在1秒（2s/50%）内工作，然后等待，直到

100%

.hand{
位置：绝对位置；
底部：30px；
右：900px；
}
.元素{
位置：相对位置；
排名：0；
左：0；
动画名称：之字形；
动画持续时间：2秒；
动画计时功能：轻松自如；
}
.要素2{
动画迭代次数：无限；
动画方向：交替；
}
@关键帧之字形{
0%{
左：0；
排名：0；
}
50% {
左：0；
排名：0；
}
100%{
左：50px；
顶部：20px；
}
}