CSS animation Property

CSS animation property is used to apply animation(s) on an element. The animation property is used in conjunction with the @keyframe rule to apply visual effects to the element.

This animation property is basically a shorthand of the following animation properties:

Example:

.div1{
  animation: moveRight 4s infinite;
}
.div2{
  animation: moveRight 4s infinite 2s;
}

Note: If we omit any property, its default value is used in the animation property.


CSS Syntax

The animation property has the below syntax:

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

Property Values

The animation property accepts the following values:

animation-nameSpecifies the name of the @keyframe at-rule which is to be applied to the selected element.
animation-durationSpecifies the time in seconds(s) or milliseconds(ms) that the animation will take to complete
animation-timing-functionSpecifies how the animation will grow. It basically defines the speed curve of the entire animation.
animation-delaySpecifies the time delay in seconds(s) or milliseconds(ms) which the animation will take before starting.
animation-iteration-countSpecifies how many times the animation should be played.
animation-directionSpecifies the direction in which the animation will play.
animation-fill-modeThis property allows us to define a style for the element when the animation is not running.
animation-play-stateSpecifies whether the animation is running or paused.
initialSets the animation property to its default value.
inheritInherits the animation property from the parent element.

General Info

Default Valuenone 0 ease 0 1 normal none running
InheritedNo
JavaScript Usageelement.style.animation = “moveRight 4s infinite”;

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment