CODEWITHSUNDEEP
csswebkitcss-animations
Max Frai
Max Frai

Reputation: 64266

Css animation lifetime

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?

Upvotes: 2

Views: 285

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157314

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

Upvotes: 2

Related Questions