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
↓ Here's a great React course we recommend. Plus, this affiliate banner helps support the site 🙏


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


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

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#