CSS Animation Tutorial #6 - Repeating Animations

Yo gang, in this tutorial, I'll show you how we can repeat our animations by using the animation-iteration-count property, which can take either an integer, or the keyword - infinite.
----- COURSE LINKS:

---------------------------------------------------------------------------------------------
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage...

========== JavaScript for Beginners Playlist ==========

============ CSS for Beginners Playlist =============

============== The Net Ninja =====================

================== Social Links ==================

[francessmith]

Love that repeating thing. My flying snail looks much more realistic now.

[Peter-jnrv]

This one liner saved me from writing 3 JS functions. Amazing

[AzurineHighlander]

thanks - I love your teaching style - I've taken at least half dozen of your courses

[duke]

I love these tutorials! I am relearning CSS animation and wish I had your tuts when I was learning for the first time. Thank you! (from: Happy learner)

[Gabriel-iqjw]

this is a really sweet tut. thank you, great content.

[MS-lhjd]

thank you so much, I was looking for a tutorial exacty like this! :)

[slowman]

Thanks I'm learning css animations it really helped me out

[viraljain]

How to minimise the delay? after the mario cart ends the animation and move out of the frame, the mario cart delays to start the animation back from the starting.
Can you solve this?

[LukeJT]

Is it possible to make this responsive? Because when I widen my browser, Mario is no longer off of the screen. I know I could just add to my pixel count when I define "to" in the keyframe, but is there a way to make it so that Mario always begins and ends off of the page no matter how wide the page is?

[rolfdisch]

really very good tut's Tanks a lot

[vishnusagubandi]

How to pause in the animation for certain time during infinite iteration??

[PrayashNiraulaz]

can we take the mario back to its initial position from 700px avoiding the sudden appearing of mario and make it look like he is riding his bike backwards and loop the animation ?

[nb]

Question:
I did it as per the tutorial with slight modifications (such as a different img for the car), however my animation repeats twice when I do not want it to repeat at all.
So my car drives to a TranslateX point, kinda glitches, goes back to the original X point, then drives again and stops permanently only on the second attempt.
Any idea why? (I am using Chrome)
@keyframes car-drive {
from {
transform: translateX(-500px);
}
to {
transform: translateX(1000px); // still visible on the screen and this is how I want it.
}
}
.orange-car {
position: relative;
top: -20px;
left: 0;
width: 500px;
animation: car-drive;
animation-duration: 3s;
animation-fill-mode: forwards;
// animation-iteration-count: infinite;
}
Thanks in advance!

P.S. this works fine in Firefox - with no glitchy repeats

[MsSuis]

Can we set the repeat to 3, but end of 3rd time, I want to make the mario stop on the 700 px of Xsurface again, so stays on the screen at the end of animation. What i wanted to do, it uses translate(x) 1000 px 2 times. And on the 3rd time it uses TranslateX 700 px and stops. Anyone, any idea?

[Price-Buster]

Net Ninja, how can I learn about JS generator functions, when I'm having so much fun driving Mario around?

[catocaster]

Is the delay play only once in the first round if use iteration?

[yanliu]

hi . i cannot see the difference between forwards backwards both if there is iteration.
i put iteration count to 3, i feel they are same.

[nazarahthecat]

Net Ninja, thanks a lot for these tutorials. You made learning CSS animation a piece of cake. :)
I have a question.
I set the had the following values set in the keyframe part:
@keyframes drive {
from{ transform: translateX(-200px)}
to{ transform: translateX(1500px)}
}
As I am trying out the examples in MacBook Air with chrome, I wanted to make sure there is the appearance of Mario entering and leaving the scene.
However, I could see that the animation becomes slower when the element reaches close to the 'to' pixel value mentioned.
Is there anyway to make the animation linear (like we can do in transition) so that it appears Mario's speed is constant?
Thanks. :)

[anandsatija]

Sir Your videos are really awesome
But Please speak at slower pace while making videos

[Ahmedhkad]

all that talk about the word "infinite"