Animation

Shorthand to set the CSS properties:

      element { animation: animation-name, animation-duration, animation-timing-function,
                       animation-delay, animation-iteration-count, animation-direction animation-fill-mode;}

This shorthand is equivalent to the following:

element {
  animation-name: animation_IDENT ;
  animation-duration: time s | time ms ;
  animation-timing-function: timing ;
  animation-delay: time s | time ms ;
  animation-iteration-count: number |infinite ;
  animation-direction: direction ;
  animation-fill-mode ;
}

Animation-Name

The animation name has to first be defined in a@keyframes statement, that name can then be called by animation:

Some examples, rumble, spinner and marquee (similar to the old HTML <MARQUEE> tag), are embedded in this page so you can try them in the sample area below.

@keyframes rumble {
  0%,
  100% {}
  50% { transform: translateY(-0.2em) }
}

@keyframes spinner{
  0%  {transform:rotate(0)}
  50% {transform:rotate(170deg)}
  100%{transform:rotate(360deg)}
}
@keyframes marquee {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

@keyframes marquee-alt {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(100%); }
    50%  { transform: translateX(0%); }
    75%  { transform: translateX(-100%); }
    100% { transform: translateX(0%); }
}

@keyframes xy {
    0%   { transform: translate(-100%, -100%); }
    100% { transform: translate(0, 0); }
}

The keyframe names are case-sensitive.
A list of all CSS properties that can be animated (Mozilla).

Animation Duration

The animation-delay property is generally used to start the animation with some predefined delay.

An alternative is to use a negative value, which will start the animation immediately, but from a specific point in the animation timeline.

To start 10 seconds into an animation: animation-delay: -10s;

Animation-timing-function

ease; Increases in velocity towards the middle of the animation, slowing back down at the end.
ease-in; Starts off slowly, with the speed of the transition of the animating properting increasing until complete.
ease-out; Starts quickly, slowing down the animation continues.
ease-in-out; The animating properties slowly transitioning, speeding up, and then slowing down again
linear; Animates at an even speed.
step-start; Equal to steps(1, jump-start)
step-end; Equal to steps(1, jump-end)
steps(4); Displays an animation iteration along n stops along the transition, displaying each stop for equal lengths of time.
jump-start; Denotes a left-continuous function, so that the first jump happens when the animation begins.
jump-end; Denotes a right-continuous function, so that the last jump happens when the animation ends.

Josh Comeau has some nice explanations and samples of these animation effects.

Defaults

The default animation property values, any value that is not specified in the shorthand will be set to the default, even if set separately in another css rule.

  animation-name: none;
  animation-duration: 0s ;
  animation-timing-function: ease ;
  animation-delay: 0s ;
  animation-iteration-count: 1 ;
  animation-direction: normal ;
  animation-fill-mode: none ;

Try it:

Change the animation: spinner 2s linear ...
to animation: rumble ... or animation: marquee ... etc

(CSS 3) Browser Support: IE 10, Edge 12 Firefox 16, Safari 9 and Chrome 43.

“I've learned that our background and circumstances may have influenced who we are, but we are responsible for who we become” ~ James Rhinehart

Related:

transform - Apply a 2D or 3D transformation to an element.
transition - CSS transition effects.
:Hover - Anchor/Link Hover Pseudo-Class - stop an animation on mouse-over.