CSS - animation Property

Quiz

CSS animation is a shorthand property for defining values to the properties: animation-composition, animation-delay, animatiom-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state and animation-timing-function.

Syntax

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

Property Values

Value	Description
animation-composition	Indicates the composite operation to apply when many animations are having simultaneous effects on the same property.
animation-delay	Indicates whether the animation should begin at the beginning of the animation or somewhere along the way, as well as the amount of time that should pass between an element loading and the start of an animation sequence.
animation-direction	Indicates if the initial iteration of animation should be forward or backward and if iterations after that should continue in the same direction or change direction each time the sequence is executed.
animation-duration	Indicates how long it takes for an animation to finish one cycle.
animation-fill-mode	Describes the pre-run and post-run styling that an animation applies to its target.
animation-iteration-count	Indicates how many times an animation should recur.
animation-name	It gives the name of the @keyframes at-rule that describes the keyframes of an animation.
animation-play-state	Indicates whether an animation sequence should be played or paused.
animation-timing-function	Describes the acceleration curves that are used to specify the keyframe transitions in an animation.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Example of CSS Animation Property

The following example shows the usage of the animation property.

Animation Property with Multiple Values

As the animation property is a shorthand property, a number of other properties can be set using it in a single declaration. In the following example, five properties animation-name,animation-duration, animation-timing-function, animation-delay and animation-iteration-count have been used.

Example

<!DOCTYPE html>
<html>

<head>

   <style>
      @keyframes slideIn {
         from {
               transform: translateX(0%);
         }
         to {
               transform: translateX(400%);
               border-radius: 50%;
               background-color: green;
         }
      }

      .animated-box {
         width: 100px;
         height: 100px;
         animation: slideIn 2s ease-in-out 1s infinite;
      }
   </style>
</head>

<body>
   <h2>
      CSS animation property
   </h2>
   <div class="animated-box"></div>
</body>

</html>

Supported Browsers

Property
animation	43.0	10.0	16.0	9.0	30.0

css_properties_reference.htm

Print Page