CODEWITHSUNDEEP
csscss-animations
Roman
Roman

Reputation: 1168

How to repeat an animation after few seconds?

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

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

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

Upvotes: 2

Views: 132

Answers (1)

לבני מלכה
לבני מלכה

Reputation: 16251

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;
    }
  }
 <div class="element element-2"><img class="hand" src="/images/career/hand.png"></div>

Upvotes: 1

Related Questions