几秒钟后如何重复播放动画？

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

将时间@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>