7

I am using WOW.js and animate.css, right now I am running my CSS to Infinite. I would like know how can I make my class run for 3 seconds stop and start again to infinite?

My html:

<img src="images/fork.png" class="fork wow rubberBand"  >

My CSS class:

.fork {
    position: absolute;
    top: 38%;
    left: 81%;
    max-width: 110px;
    -webkit-animation-iteration-count: infinite ;
    -webkit-animation-delay: 5s;

}

The solution can be in JS or CSS3.

Harry
  • 87,580
  • 25
  • 202
  • 214
raduken
  • 2,091
  • 16
  • 67
  • 105

2 Answers2

20

With pure CSS3 animations, one way to add a delay between every single iteration of the animation would be to modify the keyframes setting such that they produce the required delay.

In the below snippet, the following is what is being done:

  • The whole duration of the animation is 6 seconds. In order to have the delay, the whole duration should be the duration for which your animation actually runs + time delay. Here, the animation actually runs for 3s, we need a 3s delay and so the duration is set as 6 seconds.
  • For the first 50% of the animation (that is, 3 seconds), nothing happens and the element basically holds its position. This gives the appearance of the 3 second delay being applied
  • For the next 25% of the animation (that is, 1.5 seconds) the element moves down by 50px using transform: translateY(50px).
  • For the final 25% of the animation (that is, last 1.5 seconds) the element moves up by 50px using transform: translate(0px) (back to its original position).
  • The whole animation is repeated infinite number of times and each iteration will end up having a 3 second delay.

div{
  height: 100px;
  width: 100px;
  border: 1px solid;
  animation: move 6s infinite forwards;
}
@keyframes move{
  0% { transform: translateY(0px);}
  50% { transform: translateY(0px);}
  75% { transform: translateY(50px);}
  100% { transform: translateY(0px);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Some content</div>

The animation-delay property introduces a delay only for the first iteration and hence it cannot be used to add delays between every iteration. Below is a sample snippet illustrating this.

div{
  height: 100px;
  width: 100px;
  border: 1px solid;
  animation: move 6s infinite forwards;
  animation-delay: 3s;
}
@keyframes move{
  0% { transform: translateY(0px);}
  50% { transform: translateY(50px);}
  100% { transform: translateY(0px);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Some content</div>
Harry
  • 87,580
  • 25
  • 202
  • 214
  • 1
    What does the value of the delay parameter `forwards` do? – timo Aug 26 '15 at 10:27
  • 2
    @timo: `forwards` is not really required for this animation but in general it makes the animated element hold the state as at its last keyframe (that is, if you translate from 0px to 100px at 100% then the element will remain translated by 100px). – Harry Aug 26 '15 at 10:28
  • thanks guys , i could not stop my animation and start after 3seconds, someone knows what I am doing wrong here my animation: https://jsfiddle.net/cjk7pu2v/ – raduken Aug 26 '15 at 10:37
  • 1
    @user964836: I don't know if you linked the wrong fiddle but you haven't actually inserted dummy frames (or) increased duration like mentioned in answer. – Harry Aug 26 '15 at 10:42
  • @user964836: [This fiddle](https://jsfiddle.net/hari_shanx/cjk7pu2v/1/) shows how you should modify your keyframes and duration. I have added calculation details in there for example. If it helped, please mark answer as accepted. – Harry Aug 26 '15 at 10:51
  • @Harry maybe i did not understand well :(, but that code i posted just run in chrome. – raduken Aug 26 '15 at 10:51
  • 1
    @user964836: Did you check the fiddle that I just gave. Don't add `animation-delay`, it would not work for your case. Instead increase duration (from 1s to 4s) and add dummy keyframes (like I have done for the first 75% = 3s). – Harry Aug 26 '15 at 10:53
  • 1
    @user964836: Glad to know that it helped pal :) By the way, I am going to edit the question to add css-animations tag because that is more suited to this question (and will help in future searches). Hope you don't mind me replacing one of the existing tags. – Harry Aug 26 '15 at 10:58
  • no problem harry go ahead, i am glad exists people like you to help someone just started :), thank you very much. – raduken Aug 26 '15 at 10:59
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/87980/discussion-between-user964836-and-harry). – raduken Aug 26 '15 at 10:59
0

LIke this

html

<div class="halo halo-robford-animate"></div>

css

body{
  background: black;
}

.halo{
  width: 263px;
  height: 77px;
  background: url('http://i.imgur.com/3M05lmj.png');
}

.halo-robford-animate{
    animation: leaves 0.3s ease-in-out 3s infinite alternate;
    -webkit-animation: leaves 0.3s ease-in-out 3s infinite alternate;
     -moz-animation: leaves 0.3s ease-in-out 3s infinite alternate;
    -o-animation: leaves 0.3s ease-in-out 3s infinite alternate;
}

@-webkit-keyframes leaves {
    0% {
        opacity: 1;
    }

    50% {
      opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes leaves {
    0% {
        opacity: 1;
    }

    50% {
      opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes leaves {
    0% {
        opacity: 1;
    }

    50% {
      opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes leaves {
   0% {
        opacity: 1;
    }

    50% {
      opacity: 0.5
    }

    100% {
        opacity: 1;
    }
}

jsfiddle

Falguni Panchal
  • 8,873
  • 3
  • 27
  • 33