Options
Preview
Code
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
andto
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