CSS animation Property

Description

The animation property is a shorthand property that is a comma-separated list of animation definitions, each of which combines seven of the animation properties into a single component value. To use the animation property, you must first define the animation itself using the @keyframes rule. The @keyframes rule specifies the keyframes for the animation, which are the points in time at which the element will have certain styles.

Initial value: see individual properties
Applies to: All elements, ::before and ::after pseudo elements
Inherited: See individual properties
Computed value: See individual properties
Animatable: No
JavaScript syntax: object.style.animation

Interactive Demo

animation: rotate 2s linear 0s infinite alternate;

animation: rotate 2s linear 4s 3 reverse;

animation: rotate 1s linear 500ms infinite alternate;

animation: rotate 2s ease-in-out 2s 2 normal;

Syntax

animation: <single-animation> [ ',' <single-animation> ]*

Values

<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

<animation-name>See animation-name CSS property for values.
<animation-duration>See animation-duration CSS property for values.
<animation-timing-function>See animation-timing-function CSS property for values.
<animation-delay>See animation-delay CSS property for values.
<animation-iteration-count>See animation-iteration-count CSS property for values.
<animation-direction>See animation-direction CSS property for values.
<animation-fill-mode>See animation-fill-mode CSS property for values.
<animation-play-state>See animation-play-state CSS property for values.

Example

HTML

<div class="blink"></div>

CSS

.blink { 
   width: 200px; 
   height: 200px; 
   border-radius: 50%; 
   background: #3ac; 
   position: relative; 
} 
.blink::before, .blink::after { 
   content: ""; 
   position: absolute; 
   width: 30px; 
   height: 40px; 
   border-radius: 50%; 
   background: #000; 
   top: 40px; 
   animation: eye 3s ease-in-out infinite; 
   -webkit-animation: eye 3s ease-in-out infinite; 
} 
.blink::before { 
   left: 55px; 
} 
.blink::after { 
   right: 55px; 
} 
@keyframes eye { 
   90% { 
      transform: none; 
   } 
   95% { 
      transform: scaleY(0.1); 
   } 
} 
@-webkit-keyframes eye { 
   90% { 
      transform: none; 
   } 
   95% { 
      transform: scaleY(0.1); 
   } 
}

Result

Editor