What are CSS animations?

Basically, a CSS animation allows you to gradually change an element from one style to another. With some creativity, many animations can be done 100% in CSS, without any JavaScript!

@keyframes

The @keyframes rule is like a timeline in CSS. It allows you to specify the style at a certain moment in time.

• If your animation runs smoothly from the start to the end, you can use the from and to values.
• If your animation varies between the start and finish, like a bounce effect, use a percentage value (this is the value type our generator uses).

animation property

animation: name | duration | timing-function | delay | iteration-count | direction | fill-mode

name @keyframes name

duration total running time of the animatiom, in s or ms

timing-function how an animation progresses through the duration of each cycle

delay wait time before animation starts, in s or ms

iteration-count number of times the animation will repeat, or infinite for looping animations

direction direction of the animation (normal, reverse or alternate)

fill-mode how an animation applies styles to its target before and after its execution