Table of contents
1.
Introduction
2.
What is Animation?
3.
Main Components of Animation
3.1.
Keyframes
3.2.
Properties associated with Animation
4.
Animation Shorthand
5.
Frequently Asked Questions
6.
Key Takeaways
Last Updated: Mar 27, 2024

CSS Animation

Author Juhi Sinha
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

It is human nature that we get more attracted to dynamic things like animations. Animations make a user experience better when it is added to a web page. It seems to be more amusing when we wait for a web page with animated loading than those with just a static loading screen.

 

In web development, we can also add Animation to our web pages using CSS animation. In this article, we'll introduce you to the basics of CSS animations. So, without any further delay, let's get started!

 

What is Animation?

CSS animations refer to the change of one set of animation styles to another on a web page. It makes the look of a website more dynamic and attractive. Animations can make complex changes in CSS values and properties. We can loop our Animation, which we can not do in transition.

Main Components of Animation

  1. Keyframes
  2. Properties associated with Animation

 

Keyframes

The @keyframes is used to specify an animation code. The beginning of the Animation is specified by the keyword ‘from’. The end of the Animation is specified by the keyword ‘to’. The keywords from and to represent 0% and 100%, respectively.

The basic syntax for writing a keyframe is:

@keyframes my-animation
{
from {
background-color: green;
           }
        to {
background-color: yellow;
           }
} 

We can also write 0% and 100% in the above example instead of 'from' and 'to' keywords. During the Animation, you can change the set of CSS styles many times.

Properties associated with Animation

The animation properties are used to define the appearance and smoothness of the Animation. Some of the properties of animations are:

  • Animation-name: This property defines the name of the Animation which we want to bind to the selector. It is like a variable, and it depends on the developer what name they want to give to the keyframe. 

 

  • Animation-duration: This property defines the time required for the completion of one cycle of the animation. It is mandatory to set the duration otherwise the animation will not run. The value for animation-duration is an integer value which refers to the time in seconds. The min value is 0s. 
/* The animation code */
@keyframes container {
  0%  {background-color: red;}
  50% {background-color: yellow;}
 100% {background-color: blue;}
}

/* The element upon which we are applying the animation */
div {
 width: 150px;
 height: 150px;
 background-color: green;
 animation-name: container;
 animation-duration: 5s;
}

 

  • Animation-delay: This property defines the time delay before the start of the Animation. The value for animation-delay is an integer value which refers to the time in seconds. The min value is 0s. We can also set negative values of the time. 

 

For example, if the animation duration is 5s and we put time as -2s, then the Animation will start from 2s onwards, or we can say that the Animation will begin as if the 2s has already passed.

In the example given below, we have a 2s delay in animation:

div {
 width: 150px;
 height: 150px;
 position: relative;
 background-color: green;
 animation-name: container;
 animation-duration: 5s;
 animation-delay: 2s;
}

 

  • Animation-timing-function: This property defines the speed curve at which the Animation changes from one style to another. The various values as transition-timing-function are:
  1. ease - Defines an animation with a slow start, a short middle, and a dead end. It is a default value.
  2. linear - Defines an animation that runs at the same speed from beginning to end.
  3. ease-out - Defines a slow-ending animation.
  4. ease-in - This specifies a slow-start animation.
  5. ease-in-out - Defines a slow start and end animation.
  6. cubic-bezier(n,n,n,n) - A cubic-bezier function that allows you to define your values. 

The basic syntax for this property using cubic-bezier:

.container {
animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

Using ease-in-out value, the basic syntax will be

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

 

  • Animation-iteration-count: This property defines the number of times an animation will repeat itself. The default value of this property is 1. It can’t take negative values.

In the example given below, we have ten times iteration of our animation:

 

div {
 width: 150px;
 height: 150px;
 position: relative;
 background-color: green;
 animation-name: container;
 animation-duration: 5s;
 animation-iteration-count: 10;
}

 

  • Animation-fill-mode: The property specifies whether the values in the @keyframes timeline will remain before or after the Animation. The default value is none, which means that the values in our timeline get discarded once the Animation is completed. 

The values of this property include:

  1. forwards: Depending on the animation direction, the last keyframe will be retained.
  2. backwards: Depending on the animation direction, the first keyframe will be retained.
  3. both: follows both forward and backward rules.

In the example given below, the <div> element has got the style values assigned by the first keyframe before the start of the animation:

 

div {
 width: 150px;
 height: 150px;
 background: green;
 position: relative;
 animation-name: container;
 animation-duration: 5s;
 animation-delay: 2s;
 animation-fill-mode: backwards;
}

 

  • Animation-play-state: This property specifies whether an animation is running or paused. In this property, the users have an option to control this action. It has been running and paused as its value. The default property of this value is running.

The  example given below is for the case when the user hovers over the animation, it will get paused: 

.container:hover {
animation-play-state: paused;
}

 

  • Animation-direction: This property defines the direction of the Animation. Right, left, or alternate.

We can set in which direction the timeline runs over our keyframes with animation direction using the following desired property values:

           1) normal: forwards, which is the default value.

           2) reverse: traverse your timeline backwards.

           3) alternate: the timeline will run forwards or backwards for each animation iteration.

           4) alternate-reverse: the reverse of alternate.

 

In the example given below, we have used the value "alternate" to run the animation first forwards and then backwards:

 

div {
 width: 150px;
 height: 150px;
 position: relative;
 background-color: green;
 animation-name: container;
 animation-duration: 5s;
 animation-iteration-count: 10;
 animation-direction: alternate;
}

Animation Shorthand

It becomes very monotonous to use all the properties one by one for making an animation. So, rather than writing all the properties separately, we can define them in an animation shorthand. The properties for animation shorthand is in the following order:

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction
  7. animation-fill-mode
  8. Animation-play-state

The syntax for writing CSS shorthand animation is:

.container{
animation: container 5s ease-in-out 1s infinite forwards running;
   } 

Frequently Asked Questions

 

1.) Can we use Animation in text using CSS?

Answer: Yes, text animations in CSS are an exciting method to make our website even livelier.

 

2.) How do you stop Animation in CSS?

Answer: We can pause an animation in CSS by using the animation-play-state property with a paused value. 

 

3.) What is CSS hover?

Answer: The CSS: hover selector is one of the pseudo-classes for styling elements. The: hover is used to select elements that are hovered over by the user's cursor or mouse. It can be applied to any element or link. 

Key Takeaways

Although the web is a versatile medium, it becomes more attractive when we add a dynamic element to improve the overall quality of the user experience. 
 

So, this article explained everything about CSS animation in detail. A thorough understanding of this will be convenient in developing awesome websites.
 

If you want to learn advanced front-end web development, Coding Ninjas has one of the best courses available, which you can find here.

 

Thank you for reading!

 

Live masterclass