CSS Animation Property

The animation is the process of making shape changes and creating motions with elements.

CSS animations allow all of the following points and more.

• to have control over the intermediate states.
• to make an animation loop.
• different animations on the same element.
• to animate a specific property only halfway through the animation.
• to simulate different timing functions for different properties.

CSS animations are like mini-movies where you are the director giving out instructions (CSS rules) to your actors (HTML elements) for different scenes (keyframes).

What are CSS Animations?

An animation lets an element gradually change from one style to another.

You can change as many CSS properties you want, as many times you want.

To use CSS animation, you must first specify some keyframes for the animation.

Keyframes hold what styles the element will have at certain times.

animation is a shorthand property for several others:-

• name: the animation’s name
• duration: how long the transition lasts
• timing-function: how the intermediate states are calculated
• delay: to start the animation after a certain amount of time
• iteration-count: how many times the animation should be performed
• direction: if the animation should be reversed or not
• fill-mode: what styles are applied before the animation starts and after it ends

Following animation properties:

@keyframes:-

When we specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.

Before applying animations to HTML elements, we need to write animations using keyframes. Basically, keyframes are each intermediate step in animation. They are defined using percentages:

• 0% is the first step of the animation.
• 50% is the step halfway through the animation.
• 100% is the last step.

We can also use the keywords from and to instead of 0% and 100% respectively. We can define as many keyframes as We want, like 33%, 4% or even 29.86%.In practice, you’ll only write a few.

The following example will change both the background-color and the position of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:

/* The animation code */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

animation-name:-

The animation’s name is used at least twice:

• when writing the animation using @keyframes
• when using the animation using the animation-name property (or with the animation shorthand)

Like CSS class names, animation names can only include:-

• letters (a-z)
• numbers (0–9)
• underscores (_)
• dashes (-)

animation-duration:-

The animation-duration property defines how long time an animation should take to complete. Animation duration can be set in seconds 1s or milliseconds 200ms.If the animation-duration property is not specified, no animation will occur, because it defaults to 0s, which means no animation at all.

Syntax:-

.selector{ animation-duration: 0.5s;}

animation-delay:-

It’s useful when triggering multiple animations in sequence. Animation delays can be set in seconds 1s or milliseconds 200ms.It defaults to 0s, which means no delay at all. The animation-delay property specifies a delay for the start of an animation.

The following example has a 2 seconds delay before starting the animation:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

animation-direction:-

The animation’s direction defines in which order the keyframes are read.

• normal: starts at 0%, ends at 100%, starts at 0% again
• reverse: starts at 100%, ends at 0%, starts at 100% again
• alternate: starts at 0%, goes to 100%, goes to 0%
• alternate-reverse: starts at 100%, goes to 0%, goes to 100%

It’s easier to visualize if the animation’s iteration count is set to infinite.

animation-iteration-count

By default, animations are only played once (value of 1). You can set 3 types of values:

• integers like 2 or 3
• non-integers like 0.5 which will play only half the animation
• the keyword infinite which will repeat the animation indefinitely

.selector{ animation-iteration-count: infinite;}

animation-timing-function

Animation timing functions can use keywords like linear, ease-out, or be defined using custom cubic-bezier functions. It defaults to ease.

.selector{ animation-timing-function: ease-in-out;}