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.

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

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-timing-function>See animation-timing-function 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

Browser Support

Desktop

10	12	43	16	30	9

Tablets / Mobile

43	43	16	30	9	4.0

Last updated by CSSPortal on: 16th October 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu