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.

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.

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.

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program

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. 

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.

CSS Keyframes Example 2

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

CSS Keyframes Example 3

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

Here's How to Land a Top Software Developer Job

Full Stack Developer - MERN StackExplore Program

Combine Transform and Keyframes

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

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. Get in touch with experts by enrolling in Simplilearn's Post Graduate Program in Full Stack Web Development course.

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.