Settimeout in animation

Question

How to implement the code below to my animation, my animation is in infinite loop i want after each animation it will pause for 10 sec then start again, im using animate.css

note: i pasted the keyframe below

setTimeout(function() {  
  // 1000 == 1 seconds
  // modify dom elements here  
  // your code here
}, 1000);

HTML + CSS code of it

<h1 class="motext animated fadeInDownBig">THINK QUALITY. THINK LIFELINE.</h1>


 .motext {
    animation-duration: 20s;
    animation-delay: 19s;
    animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
     width:90%;
     max-width:1170px;
     margin:auto;
      text-align:right;
     position:relative;
    }

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@guest271314 what do you mean? im using animate.css https://github.com/daneden/animate.css — Alfred Dizon, Feb 19 '16 at 03:51
Have not tried `animate.css` , though requirement should be possible . Should `19s` delay be applied only to first animation cycle ? — guest271314, Feb 19 '16 at 03:54
@guest271314 done! :) i want each cycle of animation before repeating it, it will stay to its last position for 10 sec before the animation begins again, — Alfred Dizon, Feb 19 '16 at 03:58
You didn't specify animation name in `.motext` and `.animated` — Harish Kommuri, Feb 19 '16 at 03:58
@HarishKommuri yah buts its working, because im using animate.css i just need to put the clas of it, — Alfred Dizon, Feb 19 '16 at 04:00
its working i just want it to stay at its last position after each cycle for 10 sec — Alfred Dizon, Feb 19 '16 at 04:00

score 0 · Answer 1 · answered Feb 19 '16 at 04:03

Have not tried animate.css , though should be possible using existing css, by adjusting animation-delay to 10s , animation-direction to alternate , animation-fill-mode to forwards

.motext {
  animation-name: x;
  animation-duration: 20s;
  animation-delay: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  width: 90%;
  max-width: 1170px;
  margin: auto;
  text-align: right;
  position: relative;
  color: blue;
}
@keyframes x {
  0% {
    color: blue;
  }
  100% {
    color: red;
  }
}

<h1 class="motext animated fadeInDownBig">THINK QUALITY. THINK LIFELINE.</h1>

Settimeout in animation

1 Answers1