CSS Animation Shorthand Property

Run your animations easily with the CSS animation shorthand:

animation: crazy 4s ease-in-out 0.5s 12 backwards;

• crazy: Animation name
• 4s: Duration
• ease-in-out: Timing function
• 0.5s: Delay
• 12: Iteration count
• backwards: Fill mode

Timing-function

animation-timing-function can take one of the following values: linear, ease, ease-in, ease-out, ease-in-out or cubic-bezier(…).

Fill-mode

animation-fill-mode can take one of the following values: none, forwards, backwarts or both.