Animation in CSS

In this article, you will learn about animations in CSS, their properties, and how they can be integrated into websites with sample codes.

Animation is used to manipulate images, texts, and characters to move and style them. CSS can be used to animate HTML elements and other CSS properties using animation properties.

What is CSS animation?

CSS animation is the method of animating HTML elements using CSS animation properties.

CSS Animation Properties.

• @Keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode

@Keyframes:

Keyframes are used to state the animating properties in all stages of the animation. To use animations in CSS, keyframes must be stated out. Keyframes determine what style an element will have.

NOTE: There must be an element to apply an animation to.

@Keyframe{
 0% {background-color:green;}
 25%{background-color:blue;}
 50%{background-color:yellow;}
 100%{background-color:red;}
}
/* The element*/
div{
 width:50px;
 height: 100px;
}

Animation-name:

This is a CSS animation property that states the name of the @Keyframes at-rule to be animated.
in the following example, the animation names shapes.

@Keyframe style{
 0% {background-color:green;}
 25%{background-color:blue;} 
 50%{background-color:yellow;}
 100%{background-color:red;}
}
/* The element*/
div{
 width:;
 height: 100px;
 animation-name: style;
}

Animation-duration:

This states how long an animation takes to complete its cycle, if not stated it will be set to default which is 0s(0 seconds) which mean no animation will occur.
In the example below that animation-duration is set to 5s.

@Keyframe style{
 0% {background-color:green;}
 25%{background-color:blue;}
 50%{background-color:yellow;}
 100%{background-color:red;}
}
/* The element*/
div{
 width:;
 height: 100px;
 animation-name: style;
 animation-duration:5s;
}

Animation-delay:

This is the number of waiting times before animation begins. It is usually in seconds.
The example below delays the animation for 3s.

@Keyframe style{
 0% {background-color:green;}
 25%{background-color:blue;}
 50%{background-color:yellow;}
 100%{background-color:red;}
}
/* The element*/
div{
 width:;
 height: 100px;
 animation-name: style;
 animation-duration:5s;
 animation-delay:3s;
}

Animation-iteration-count:

This is a CSS animation property, that sets how many times the animation should run before stopping.
NOTE: Multiple values can be set.
In the example below the animation-iteration-count is 4.

@Keyframe style{
 0% {background-color:green;}
 25%{background-color:blue;}
 50%{background-color:yellow;}
 100%{background-color:red;}
}
/* The element*/
div{
 width:;
 height: 100px;
 animation-name: style;
 animation-duration:5s;
 animation-delay:3s;
 animation-iteration-count:4;
}

Animation-direction:

CSS animation-direction states the pattern in which the animation should be played, it can be forward, backward, or in a different direction.

The ideal values for animation-direction are:

• Normal: This is the default direction, it is played forward.

• Reverse: This is the opposite of the default, it is played backward.

• Alternate: The animation plays from normal then continues in the reverse direction, which is played forward then backward.

• Alternate-reverse: This is played backward to forward.
  The example below the animation direction is played in the normal direction(forward):
  

@Keyframe style{
 0% {background-color:green;}
 25%{background-color:blue;}
 50%{background-color:yellow;}
 100%{background-color:red;}
}
/* The element*/
div{
 width:;
 height: 100px;
 animation-name: style;
 animation-duration:5s;
 animation-delay:3s;
 animation-iteration-count:4;
 animation-direction:normal;
}

Animation-timing-function:

This is a CSS property that states the speed at which the animation flows, i.e the speed curve of the animation.

It has the following values:

• Linear: Has the same speed from start to end.

• Ease: This is the default value, it starts slow then graduates too fast, and then ends slow.

• Ease-in: this has a slow start.

• Ease-out: this has a slow end.

• Ease-in-out: This starts slow and ends slow.

• cubic-bezier(0,0,0,0): with the cubic-bezier function you can state your own value.
  In the example below the animation-timing-function is ease-in-out.
  

@Keyframe style{
 0% {background-color:green;}
 25%{background-color:blue;}
 50%{background-color:yellow;}
 100%{background-color:red;}
}
/* The element*/
div{
 width:;
 height: 100px;
 animation-name: style;
 animation-duration:5s;
 animation-delay:3s;
 animation-iteration-count:4;
 animation-direction:normal;
 animation-timing-function: ease-in-out;
}

Animation-fill-mode:

This states what happens when the animation is not playing (before it starts and after it stops).

CSS animation-fill-mode values are:

• Forward: The

  element retain the style values from the last keyframe when the animation ends.

• Backward: The

  element retain the style values from the last keyframe before the animation starts.

• Both: Animation uses the forward and backward values.

• None: This is the default value, animation remains the same.
  IN the example below the animation-fill-mode is set as both:
  

@Keyframe style{
 0% {background-color:green;}
 25%{background-color:blue;}
 50%{background-color:yellow;}
 100%{background-color:red;}
}
/* The element*/
div{
 width:;
 height: 100px;
 animation-name: style;
 animation-duration:5s;
 animation-delay:3s;
 animation-iteration-count:4;
 animation-direction:normal;
 animation-timing-function: ease-in-out;
 animation-fill-mode:both;
}

Comments

[CristoferK]

Interesting!