How to control the timing after animation has ended?

Question

Like my animation has ended and it is on infinite count , and I want it to take some rest for 2 or 3 seconds after this portion of time it should start itself animating again. How to perform this thing ?

Answer 1

By changing the timings in the @keyframes

Answer 2

no. like you con do like this
@keyframes animation{
0%{color:red;}
25%{color:green;}
50%{color:blue;}
100%{color:blue;}
}
If the animation duration is 4s then this animation will appear paused for 2s

Answer 3

/*paste this in css section
@Kiran
try changing the percentage values of keyframes

check and experiment with the below a bit.

*/
body {
background-color:red;
-webkit-animation-name:love;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes love {
0% {background-color:blue;}
20% {background-color:green;}
30% {background-color:yellow;}
40% {background-color:pink;}
/*there's a typo above in background spelling of your code */
60% {background-color:red;}
}

Answer 4

@Kiran
Welcome, No issues.

I didn't know you had it, figured already. can't read your mind now can we :)? consider posting solutions when you find them & adding [solved] before your question. so people know this was resolved.

You got that correct. also try experimenting when unsure; it helps to test things. sometimes they give you ways on how to or not to the do things.
(you learn it's not the exactly the timing but also the ratios to which the animations run relative to the duration of time given.
think will there be a much delay in a 1s animation?)

Glad i was able to clarify your doubts.

Answer 5

change the percents in your animation

Answer 6

I believe you'll either have to set that up with creative timing or use JavaScript.

Answer 7

Thanks for all those kind and helpful words 😊
I need one more help- "Is there any way I can make an animation start when another has ended or for this also I will have to rely on durations and timing percentages ?

Answer 8

Thank you Krishna but if you'd given this answer just some 15 min back I'd given all the credit to you but I figured out myself.
The same idea struck me !
All the percentages are nothing but just the ratios of time so I thought of I'll not complete the animation to 100% then it wil mark the end of animation but I was not sure becuase I'd set the timing x sec so how could the animation stop at <x seconds.
Thank you as I was just coding amd you clarifed everything by giving your answer
Once again Thank You!!

Answer 9

Swapnil are you talking about duration? ? If yes, then you didn't get my question.

Answer 10

check out my code , it's not like this as you're saying
https://code.sololearn.com/WRfJS98kRBqC/?ref=app