The HTML language provides the structure of the web page, and CSS provides the design and formatting of that application. This combination also allows you to add animation, as the animated elements look more attractive as compared to static elements. It also lets an element change its style gradually.

This article will guide how we can apply animation to the elements. So, let’s begin!

What are CSS Animation Keyframes?

To get the animation done, we must bind the animation to the HTML element. For this purpose, use the keyword “@keyframes” followed by the animation name. This component specifies the start and end of the animation.

How to Set up CSS Animation Keyframes?

To set up animation keyframes in CSS, we will go through two examples.

Example 1

For setting up animation keyframes in CSS, perform the following steps:

• • Add a <div> having the class name “main-div”.
  • Inside the div, add another div with the class name “img-peng”.
  • Inside this img-peng div, add <img> to place the image. This tag has three attributes, the “src” attribute to provide the image path, “alt” is the alternative text that is added if the image is not displayed, and the “width” attribute to provide the width of the image.

HTML

 
CSS

 
In CSS, the “.main-div” is added to access the div class. The properties applied to it are explained below:

• • “width” property value defines the div’s width.
  • “height” property is utilized to set the div’s height.
  • “background-color” property applies color to the element’s background.
  • “margin” is set as “20px auto”, which indicates the space from top and bottom, and auto means equal space from left and right.
  • “padding” property value is assigned as 10px, which applies space around the element’s content.

Style img-peng class

 
The “.img-peng” is used to access the div class, mentioned in the above HTML file. This div element is styled with properties discussed below:

• • “width” property value is utilized to set the element’s width.
  • “height” property value is utilized to set the element’s height.
  • “position” property is assigned the value “relative”, which means it will be positioned relative to its normal position.
  • “animation” name is given as “shake”. However, you can name animation according to the requirement.
  • “animation-duration” represents the duration of the animation, which is 2 seconds.
  • “animation-timing-function” is assigned a value of 2s which means in 2 seconds, the animation is completed.
  • “animation-iteration-count” is set as infinite, which means this animation will occur in infinite time.

Define @keyframes With to and from keywords

 
The description of the animation keyframes set to the image is listed below:

• • “@keyframes shake” refers to the animation name shake followed by the keyword @keyframes. Within this rule, the behavior of the animation is specified.
  • Inside its curly brackets, the “from” and “to” keywords specify different intervals to define the animation behavior.
  • The “top” property is assigned the value of 50px, which means the animation starts from 50px from the top of the screen and continues to the 200px at the bottom.

As a result, you will see the following output:

Now, let the animation behave differently at different intervals. To do so, utilize the animation percentages in the @keyframes.

Specify @keyframes With Percentages

 
So, the description of the above code snippet is mentioned here:

• • The percentage values 0%, 25%, 50%, 75%, and 100% represent the animation at different intervals.
  • Moreover, at 0%, the space at the left of the image will be “-50px”. At 25%, the space to the left will be “50px”. At 50%, the space to the left will be “-25px”. At 75%, the left space will be “25px”, and when the animation completes (100%), the left space will be “10px”.

The above code displays the following animation:

Let’s take another example to see how we can set animations to the images.

Example 2

In HTML, add a <div> having the class name “main-page”. Inside this <div> element, place two more div tags with classes “cloud1” and “cloud2”, respectively.

HTML

 
CSS

 
In CSS, we will assign the following CSS properties to the body element:

• • “margin” property as 0 specifies no space around the element.
  • “padding” property with the value 0 specifies no space around the element’s content.

Style main-page div

 
Here:

• • “.main-page” is used to access the div class.
  • “background-image” property is assigned the value “url(/images/wolf-night.png)” where images is the folder that contains the image wolf-night.png.
  • “background-repeat” property is assigned the value “no-repeat, which means the image will be displayed once.
  • “background-size” is set as a “cover” to fill the entire div element.
  • “height” is 100vh which is 100% of the viewport’s height.
  • “position” as relative sets the image position relative to its current location.
  • “overflow” property’s value is set as hidden to hide the part of the image that is too big to fit into the container.

Style cloud1 class

 
The div class cloud1 is applied with the following explained properties:

• • “.cloud1” is used to access the div class cloud1.
  • “background-image” property is set as url(/images/cloud.png), where images are the folder containing the image cloud.png.
  • “background-size” with the value “contain” ensures the visibility of the image.
  • “background-repeat” property with the value set as “no-repeat” displays the image as non-repeated.
  • “position” as absolute positions the image relative to its parent’s element.
  • “top” property sets the image at 100px from the top.
  • “width” property is utilized for setting the div element’s width to 500px.
  • “height” property is utilized for setting the div element’s height to 300px.
  • “animation” is assigned the name cloudanimation1.
  • “animation-duration” represents the duration of the animation, which is 70 seconds.
  • “animation-iteration-count” is assigned the value infinite, which will iterate the animation infinite times.

So far, we have applied the CSS properties to the div class main-page and cloud1. Now, in the next section, we will style the next div class named cloud2.

Style cloud2 class

 
The div class cloud2 is applied with the properties that are explained below:

• • “.cloud2” is used to access the class cloud2.
  • “background-image” property is set as url(/images/cloud.png), where the image is a folder that contains the image cloud.png.
  • “background-size” contains a value makes sure the visibility of the image.
  • “background-repeat” property with the value set as no-repeat displays the image as non-repeat.
  • “position” as absolute positions the image relative to its parent’s element.
  • “top” property sets the image at 100px from the top.
  • “width” property is utilized to set the width of the div element.
  • “height” property is utilized to set the height of the div element.
  • “animation” is assigned the name cloudanimation2.
  • “animation-duration” represents the duration of the animation.
  • “animation-iteration-count” is assigned the value infinite, which will iterate the animation infinite times.

Specify @keyframes for cloudanimation1

 
The cloud1 div is bound with animation that is described below:

• • “@keyframes cloudanimation1” the name of animation cloudanimation1 is followed by the keyword @keyframes that is used to specify transition.
  • The @keyframes keyword specifies how the animation is done from start to end on the cloud images.
  • The “to” and “from” keywords specify the cloud1 will move from 100% to the 0px of the screen.

Specify @keyframes for cloudanimation2

 
The div class cloud2 is associated with the animation that is explained below:

• • “@keyframes cloudanimation2” represents the animation name cloudanimation2 followed by the keyword @keyframes that is used to specify animation.
  • The “0%” and “100%” represent the start and end of the animation.
  • At 0% of the animation, the cloud would be at the left with the value set as 0%, and it will gradually move to 100% of the width.

Output

That’s cool! We have discussed how we can specify animation to the elements using the keyword @keyframes successfully.

Conclusion

CSS permits us to apply styles to HTML elements. The animation in CSS performs transitions from one style to another. It consists of two components, the animation styles, and the keyframes. Animation styles represent different properties such as their name, animation-duration, animation-iteration-count, and more. Whereas the keyframe component defines the beginning and end of the animation. This guide elaborated on how to set up animation keyframes with examples.