Notice how the start 0% and the end 100% have the same CSS rules. This ensures that the animation loops perfectly. Because the iteration count is set to infinite, the animation will go from 0% to 100%, and then back to0% instantly and indefinitely.

animation-name

The animation’s name is used at least twice:

when writing the animation using @keyframes

when using the animation using the animation-name property (or withing the animation shorthand)

animation-timing-function

Just like transition timing functions, animation timing functions can use keywords like linear, ease-out, or be defined using custom cubic bezier functions.

.selector{animation-timing-function:ease-in-out;}

It defaults to ease.

Because CSS animations use keyframes, you can set a linear timing function and simulate an specific cubic bezier curve by defining a lot of very specific keyframes. Check out Bounce.js to generate advanced animations.

animation-delay

Just like transition delays, animation delays can be set in seconds1s or milliseconds200ms.