CSS Property animation

The animation property is a shorthand property for six of the animation properties:

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

The animation property calls and controls an @keyframe animation. Like this:

.element-to-animate {
  animation: MyAnimation 5s infinite;
}
@keyframes MyAnimation {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

The following code shows how to use vendor prefixes to get better browser support.

#box {
  -webkit-animation: MyAnimationName 5s infinite;
  -moz-animation:    MyAnimationName 5s infinite;
  -o-animation:      MyAnimationName 5s infinite;
  animation:         MyAnimationName 5s infinite;
}
@-webkit-keyframes MyAnimationName {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes MyAnimationName {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes MyAnimationName {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes MyAnimationName {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

The following code shows how to add multiple steps in animation.

@keyframes MyAnimationName {
  0% {
    font-size: 10px;
  }
  30% {
    font-size: 15px;
  }
  100% {
    font-size: 12px;
  }
}

#box {
  animation: MyAnimationName 2s infinite;
}

The following code creates the keyframe animation with separate properties.

#box {
  animation-name: MyAnimationName;
  animation-duration: 4s;
  animation-iteration-count: 10;
  animation-direction: alternate;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: 2s;
}

Summary

Initial value: none 0 ease 0 1 normal none running
Inherited: no
CSS Version: CSS3
JavaScript syntax: object.style.animation="mymove 5s infinite"
Animatable: no

CSS Syntax

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

In the following code,

animation: test 1s 2s 3 alternate backwards

1s is duration, 2s is delay, 3 is iterations.

Property Values

animation-name: set the name of the keyframe
animation-duration: set animation duration in seconds or milliseconds
animation-timing-function: set the speed curve of the animation
animation-delay: set a delay before starting the animation
animation-iteration-count: set how many times an animation should be played
animation-direction: set whether to play the animation in reverse on alternate cycles
animation-fill-mode: set what values to use before or after the animation
animation-play-state: run or pause the animation

Browser compatibility


`animation`	4.0 -webkit-	10.0	16.0 (5.0 -moz-)	4.0 -webkit-	15.0 -webkit-(12.0 -o-)

Example

<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--from  w  w w .j  a  v  a 2  s  .c  o m-->
    width: 100px;
    height: 100px;
    background: black;
    position: relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}
</style>
</head>
<body>
<div></div>

</body>
</html>

Click to view the demo