Table of Contents

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

css animation illustration for: 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.