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 ;


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 {
  100% {}
  50% { transform: translateY(-0.2em) }

@keyframes spinner{
  0%  {transform:rotate(0)}
  50% {transform:rotate(170deg)}
@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).


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.


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 sample

(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


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.

Copyright © 2013-2022
Some rights reserved