How to repeat an animation after few seconds?

Question

I have an image of a moving hand pointing to an email. The hand animates and points to the email. The problem is that I don't know how to repeat the animation after few seconds. My code:

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

and in HTML

My question: How can I run the animation after few seconds?

user_9140740 · Answer

Dvide time in @keyframes -- % also calculate the animation-duration= time you want the animation + time for waiting

as in this example the animation work in 1 first second (2s / 50%) then wait until 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;
    }
  }

How to repeat an animation after few seconds?

1 Answers