CSS Keyframes: A Brief Introduction

CSS stands for Cascading Style Sheets. It is a style sheet language that is used to describe the look and formatting of a document written in a markup language. It provides an additional feature to HTML, thus making it very useful. It is generally used with HTML to change the style of web pages and user interfaces. In this article, we will try to understand an important part of CSS animation that is Keyframes.

In this article, we will discuss the following topics:

  • What are CSS keyframes?
  • Keyframes Timing Function
  • CSS Keyframes Example 1
  • CSS Keyframes Example 2
  • CSS Keyframes Example 3
  • Combine Transform and Keyframes

What Are CSS Keyframes?

In CSS, keyframes are used for animations. It gives you more control over the animation you want to perform. The animation is created by gradually changing from one style to another. You can change the CSS styles as many times as you want.

FREE Java Certification Training

Learn A-Z of Java like never beforeEnroll Now
FREE Java Certification Training

Syntax:

@keyframes [name]{

      from{

        [styles];

      }

      to{

        [styles];

      }

  • The [name] value defines the name of the animation. You can name it anything you want.
  • The [styles] value defines the CSS style properties.

Keep in mind that these do not have any selectors on them. They are at the root of the CSS page.

Keyframes Timing Functions

The timing function is used to control the rate of animation. We can use the following values for better understanding:

  • Linear: It means the transition will be constant from start to end.
  • Ease:  It means that the animation will start slowly, and then after a time period, the speed will increase, and before the end speed will slow down again.
  • Ease-in: It is very similar to ease, but the animation will end quickly.
  • Ease-out: It is very similar to ease. The only difference is that it starts fast.

CSS Keyframes Example 1

Let’s look at a basic example to understand how keyframes work. 

1-css-keyframes

keyframes-2

Here, we have created a box with a height and width of 200px. The color of the box is red. A keyframe named ‘myframes’ is created which will increase the height of the box all the way to 500px.

Animation name specifies the name of @keyframes defined animations that should be applied to the selected element.

Animation duration specifies how many seconds or milliseconds that animation takes to complete one cycle of the animation.

The timing function specifies how the animation will progress over the duration of each cycle i.e. the easing functions.

Iteration count specifies the number of times an animation cycle should be played before stopping.

Recording

CSS Keyframes Example 2

In this example. we will see another simple way to write keyframes with multiple style declarations.

keyframes-3

Recording

Full Stack Java Developer Course

The Gateway to Master Web DevelopmentExplore Course
Full Stack Java Developer Course

CSS Keyframes Example 3

In this example, we will see multiple keyframes with multiple style declarations.

keyframes-4

Recording

Combine Transform and Keyframes

In this example, we have combined the keyframes with the transform property to create a rotating box.

5-css-keyframes

Recording

Get skilled in HTML5 and CSS3 with the Full Stack Java Developer Master's Program. Click to check out the program details! 

Conclusion

With this, we come to the end of this CSS keyframes article. We discussed several examples and animation properties to understand the working of keyframes. By working with different keyframes and animation properties, you will be able to understand the concepts better.

If you have any questions or feedback regarding our CSS keyframes article, let us know in the comments section. Our experts will get back to you as soon as possible.

About the Author

Aryan GuptaAryan Gupta

Aryan is a tech enthusiast who likes to stay updated about trending technologies of today. He is passionate about all things technology, a keen researcher, and writes to inspire. Aside from technology, he is an active football player and a keen enthusiast of the game.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.