Animations in CSS

What are CSS Animations?

People are always attracted to animations. If you place a drawing and a video in front of them, they'll always go to the video because it's moving and hence eye-catching. Hence adding animations to your website is the absolute way to attract users to your website.

CSS Animation is a step-by-step process of moving or changing the position and appearance of the objects on a webpage. Earlier in any website, animations were done using JavaScript, which makes the process tedious and harder to understand. But later, CSS comes with many pre-defined attributes(CSS Properties) that just make the animation part easier and faster with fewer complexities(like creating objects in JavaScript, writing many DOM manipulations, etc.).

Basically, animations are applied to elements present in your webpage like image, text, divs, etc. Let's say you have added an image and you want to animate it -

We provide styling to our objects in CSS. So let's say I give this image a certain width and height -

This will give the image width and height of 100px. Now I want to animate it. This is when the two building blocks of CSS Animation come into play.

Basic Building Blocks of CSS Animation.

CSS has two basic building blocks that are most important to perform animation in CSS -

1. CSS Keyframes

2. CSS Animation Properties

Let's start with the first one.

1. CSS Keyframes -

Keyframes are considered the root of animation in CSS. They are used to define the movement or transformation of the object from point A to point B. We can do almost anything under the keyframes to get the perfect, smooth animation. Using keyframes, you can also set the properties of animations.

In order to use the keyframes in CSS, you have to write @keyframes keyword and then the animation name.

The syntax of keyframes consists of 3 things -

1. Animation name - While declaring the keyframes as "@keyframes," you have to specify for which animation you're providing the keyframes. Hence you have to write the animation name. This name will not be predefined. You have to choose the name. The syntax will look like this -

2. The animation's stages - These stages are used to specify the animation's flow and the points at which the animation should change its motion or appearances like size, color, or position.

   Every animation must have a start stage and an end stage. These stages define how your animation should start and end. You can add many intermediate stages to define the flow of your animation in between these two stages.

   There are two ways through which we can specify stages of our animation.

   • from-to keywords This is used when you only need to specify the animation only for two stages, i.e., start and end. You cannot add intermediate stages here. "from" refers to start, and "to" refers to end.

   • The percentage assignment The percentage assignment is used when you want to have more stages in between your start and end stages. 0% refers to the start of the animation, while 100% refers to the end of the animation. Many other percentages can be added in between these two.

3. CSS Properties - These properties are used to change the appearance of the object as the animation continues. Under this, we can use almost all the properties provided by CSS. Transform properties like scale, rotate, skew, etc., are widely used in this.

Enough with the theory. Let's apply some animation.

Why don't we animate the image we have created above? Let's try something simple. Let's create an animation with the name "fade-in-out". The image will disappear at the start of the animation and then reappear at the end. Below is the code snippet.

We've set the opacity of the image to 1 at the start of the animation. Then, at 50% (halfway through the animation), we set the opacity to 0, which makes the image vanish. To make the image reappear, set the opacity to 1 at 100%.

That's how animations are done in CSS using keyframes. Creating stages and changing the CSS properties carefully will give you a beautiful animation.

2. CSS Animation Properties -

There are some properties in CSS that are used solely for animation purposes. These properties help us to create custom animations to make it look impressive. You can delay your animation, and you can define a particular duration for your animation, etc. Animation properties are helpful for us to create beautiful animation in CSS.

The 2 properties - "animation-name" and "animation-duration" are compulsory for any animation to happen. You have to provide a name to your animation as well as a duration for how long your animation should perform.

Let's understand each property of Animation in CSS.

1. animation-name - This property is used to define the name of your animation. Animation name can be anything as per the programmer's choice, but it should be similar to the action that the animation will be performing.

For example, the name "bounce" will do bouncing animation, and "slide" will do sliding animation.

2. animation-duration - This property is used to specify the duration of your animation.

So the animation will take 3 seconds to complete.

3. animation-iteration-count - This property allows us to define how many times we want our animation to get played.

The animation will occur four times, and after that, it will stop. If you want to perform your animation continuously, you have to pass the value as "infinite".

Refer to the following code snippet.

Notice that the animation "fade-in-out" will happen four times, and after that, the animation will stop.

4. animation-timing-function - This property is the same as "transition-timing-curve" and has the same values as well. The animation-timing function helps us to smoothen our animation by defining the speed curve and the pace. The values that we can use in the property are -

• ease
• linear
• ease-in
• ease-out
• ease-in-out
• initial
• inherit

5. animation-delay - As the name suggests, this property is used to delay your animation by a certain amount of time. This can be very useful in creating custom animations, like when you want to show another object once after the first object's animation is completed.

This statement will delay your animation by 3 seconds.

Following is an example.

As you can see in the above example, the animation "fade-in-out" takes a delay of 3 seconds. After 3 seconds, the animation starts to happen. That's the use of the "animation-delay" property.

6. animation-direction - This property specifies how the animation should perform once triggered. It can either be forward or reverse or in an alternate way. It has the following values -

• normal - This is the value of "animation-direction" by default. With this, the animation is played as it is without any changes. It will start at 0%, performed till 100%, i.e., completes a cycle, and then restarts again.
• reverse - With this, the animation will play in reverse. The animation will start from 100% and go backward till 0%.
• alternate - This value allows your animation to play in both normal and in reverse alternately. For the first cycle, the animation will start from 0% till 100%, and for the second cycle, the animation will start from 100% till 0% and so on.
• alternate-reverse - This is exactly reverse of "alternate". For the first cycle, the animation will be in "reverse" mode, and for the next cycle, the animation will be in "normal mode".

The following example will show you all the use cases of "animation-direction" -

7. animation-fill-mode - This property allows us to add style to the element before and after the animation. Meaning this property allows us to write properties outside of the time of animation(i.e., before and after the animation). "animation-fill-mode" takes four values as below-

• none - This is the default value of "animation-fill-mode". This does not apply any style to your element. Following is an example of this. When you click on the start button, the animation will start and complete one cycle. When the animation starts, The ball will undergo three changes -

  1. Shifts to the right.
  2. Size will decrease.
  3. Color will change to blue.

  After the animation ends, you can see the ball comes to its original position.

• forwards - This value is most widely used because this will tell the browser that you want to hold the position of your element at the end of the element. So once the animation ends, the element will not go to its original place. Following is an example.

  When the animation starts, The ball will undergo three changes - 1. Shifts to the right. 2. Size will decrease. 3. Color will change to blue.

  At the end of the animation, the ball will not move to the start. Instead, it will hold its position in the blue color. Now when you hit the reset button, it will go back to its original position.

• backwards - Let's first see the example and add this value. Observe closely what happens.

I hope you notice that the output is the same as that of "none". That's because this does exactly the opposite of "forwards". In this, the element will retain its position, which it had at the beginning of the animation.

So here comes another question, why should one use backwards?

You will understand backwards value better if you use the "animation-delay" property in it. Let me show you an example to help you understand this concept.

If you add animation delay, you can see the animation at 0% happening without any delay, and the ball turns green and the rest of the animation after the delayed time then changes the color of the ball to blue.

Since we used the backward value, the animation will not have any delay performing the start of the animation (i.e., at 0%). It will have a delay with the rest of the points present in the keyframes.

• both - The final value in "animation-fill-mode" is both. This will allow us to apply both the "forwards" and "backwards" effects to the element.

I hope by seeing the animation, you understood the concept. As you can see, the initial keyframe styles are placed during the initial delay period, and then the animation concludes and freezes with the styles from the last keyframe (which is, as mentioned, often what you will want). If it weren't for the delay and alternate color scheme defined in the first keyframe, this value would be very similar to just using forwards.

8. animation-play-state -

This property will define the state of your animation. It will be either "paused" or "running". You want to explicitly write the value for this to happen. When the animation is paused, it resumes at the same point where it left off if the status is set to "running."

There are two possible values for this property -

• paused - Depicting that the animation is stopped.
• running - Depicting that the animation is still going on.

I hope this example will clear all your doubts.

CSS Shorthand Property

There are almost eight animation properties that we have discussed above, and don't you think it will be time-consuming to write all of them whenever I want to add animation? Yeah, I thought so. Also, this will just go to increase the size of our code which ultimately increases the processing time. This will slow down our website considerably.

To solve this problem, we can use the shorthand property of CSS Animation. Shorthand properties are an elegant way to add properties in a single line and hence reduce the code length. Let's see the syntax of the Animation Shorthand property -

You can see all eight animation properties are now in a single statement. The property is called "animation". Among all these, animation-name and animation-duration are required one. Without them, the animation won't happen.

Let's see one example. You can write the below code.

as

Interesting Animations You Should Try

Here is the most interesting part of this article. This is where we will see all the practical concepts that we have studied till now. Using all the CSS Animation properties, we are going to create beautiful and eye-catching animations. Hope y'all are excited.

1. Text Animation -

Text Animations are fun and interesting to create. It looks good on your website and catches the eye of the user. Creating a text animation can be easy if you know what you want to do.

Let's see the following example.

This is a Title kind of animation. We are just applying the scale property inside the keyframes accordingly. All kinds of animation can be done using different such properties.

2. Color Animation -

Color animation are one of the best options out there. You can play with colors and gradients and can always create something better. Let's create a background gradient changer.

Looks great, huh? In this, we created a big gradient background of 400% width and 400% height using the following code -

Then under keyframes, we're just changing the background-position and moving it diagonally.

3. Slide - in Animation.

Sliding animations are cool and look amazing. Using some translate property, you can slide any element according to your will.

Let's see one example.

This animation is called "Slide-in Left". As you can see from the keyframes, we shifted the square on the left side and changed the opacity to 0 -

So when the animation comes to an end, the square will come to its original styling, which is this -

Hence you will see the sliding animation.

You can create any slide animation like the slide out, slide down, slide up and add the directions like left, right, top or bottom. The combination can be whatever you like.

4. Rotate Animation -

Just like in slide animation, we use the translate property of transform in CSS. In rotate animation, we use the rotate property of transform. You can rotate anything along the center axis of the element, clockwise or anticlockwise.

Let's see the example -

5. Wave Animation -

Wave animations are the best but can be very hard to achieve. Usually, waves are created using SVGs (Scalable Vector Graphics), but you can create a wave on Text as well.

Let's see one example -

Here as you can see, the text is in wavy format. How did we do that?

First, we wrote every single letter in a separate span tag. Then in animation, we have given each letter an animation-delay of 0.1s. And then at the 60% frame, we are just lifting each letter up along the Y-axis. I know this can be complicated but once understood, you can create almost anything.

6. Glow Animation -

Glow animations are the most beautiful ones. You can play with colors and blur properties and can create a light-like effect. If you include a gradient in it, this animation will be mind-blowing. Let's see the example.

Looks so good, right? As you can see in the glowing keyframe, for the glowing effect, we're using the box-shadow property, which allows us to give shadow to the element.

7. Bounce Animation -

Imagine a ball bouncing. It goes down, jumps back up and stays up for a bit, and then again goes down. This is the exact thing we have to create in this part of the animation.

Let's see the below example -

Have a look at the keyframes.

1. At 0% - The ball will remain on the ground. Hence translateY(0).
2. At 40% - We want the ball to go up. Hence translateY(-120px).
3. At 50% - Now, since the ball is up, we want it to go down. Hence translateY(0).
4. At 60% - To give the ball a feel of bounce, we have to make it go a little up. Hence translateY(-15px)
5. At 100% - Finally, the ball will come to its original position. Hence translateY(0).

8. Hover Animation -

Hover means to float over something. On a website, your mouse moves over all the elements present. This means that it is hovering(floating) over the website. And the animation which happens on this mouse hover is called Hover Animation. You can add hover animation using the pseudo-class "". This will tell the browser that hovers animation is going to take place on this element.

Let's see one example -

This example is the same as that of "Glow Animation" except that when you hover over the button, you can see the glowing effect happening. Using the "" pseudo property, we added the background color and box shadow. So when you hover over this button, the browser will call the : hover property and execute the code inside this.

9. Infinite Loading Animation -

You will find an Infinite Loader on almost every website. It represents that your website is loading and will be available once it fully loads. Infinite Loader can be of many designs. You can use image files, and you can use SVGs or you can create your own using CSS Properties and Animations.

Let's create a simple preloader -

This is the most simple and elegant preloader that many websites use. See the code, and you will understand what exactly we did. First, we create a circle using the "border" property giving a light blue color.

Next, we have added a border-top property to create that dark blue border which will ultimately get rotated.

Now, we have to animate the border and make it looks like it is rotating. So inside keyframes, we have added the transform property and rotated it by 360deg clockwise.

10. Parallax Scrolling -

Parallax Scrolling is a trend of Website design that is now accepted by many designers and developers worldwide. In Parallax Scrolling, there are many layers, and whenever the user scrolls on the website, the moving speed of the background layers is slower than the moving speed of the foreground, giving a sense of 3D effect to the viewers.

Achieving the Parallax effect can be hard and complicated, but if you understand what exactly you want and with some CSS properties and a little JavaScript, you can surely create a parallax effect. See the following example -