Css animation lifetime

Question

I can't understand how to run animation for some constant period of time.

Here is the source of animation:

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

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

So I modify css of the element where I want apply pulse.

-webkit-animation-duration: 10s;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: 10;

As I understand docs, the animation should be run 10 times for 10s each. So, 100 seconds at all. But this is wrong. What is the right way to specify animation life as 100 seconds?

@Mr.Alien Sorry, that was a mistake. `100` is the right number. — Max Frai, Jan 25 '14 at 12:03

score 2 · Accepted Answer · edited May 23 '17 at 10:31

Ok, so you say that the timing function you are getting is incorrect, well I won't agree to that, when you are setting an animation duration to 10s that means, 5s for first cycle, and in the next 5s for your div to scale out.

I am using JavaScript count down here, and am also using animation-delay property set to 1 seconds, just to sync with JavaScript countdown which I took from here...

So if you see, the animation ends perfectly at 1 so it works perfectly, if you are expecting to do something else than please comment and I will modify my answer accordingly..

Demo (I've reduced the animation iteration to 2 = 20 seconds)

Note: Use Chrome to see the Demo as OP is using only -webkit and haven't requested any code for Firefox or Internet Explorer.

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(2);
        transform: scale(2);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.pulse {
    -webkit-animation-name: pulse;
    -webkit-animation-duration: 10s;
    -webkit-animation-delay: 1s;
    -webkit-animation-iteration-count: 2;
    position: absolute;
    left: 50%;
    font-size: 50px;
    top: 10%;
}

Great answer. I think there is some mistake in my code. Will rewrite it refer to your answer. Thank you. — Max Frai, Jan 25 '14 at 12:15

Css animation lifetime

1 Answers1