---
title: "Use of Keyframe Rules in CSS"  
description: "Use of Keyframe Rules in CSS"  
author: "Ethan Karla"  
published: 2021-07-15  
canonical: https://answers.mindstick.com/qa/93705/use-of-keyframe-rules-in-css  
category: "programming"  
tags: ["css cascading style sheets"]  
reading_time: 3 minutes  

---

# Use of Keyframe Rules in CSS

What is the use of Keyframe [Rules](https://www.mindstick.com/articles/43901/blackjack-rules) in [CSS](https://www.mindstick.com/forum/514/background-gradient-ie7-css-problem)? Are keyframe rules [useful](https://yourviews.mindstick.com/view/81558/media-is-how-much-useful-for-us) for creating attractive websites?

## Answers

### Answer by Shivam Prajapati

The CSS @ Keyframe identify the use of animation rule which define that how the element will perform with timeline. @Keyframe rules are specified with the name and the syntax is :

```
@keyframes animation_name { keyframes-selector        {       css-styles;    } }
```

Let's understand with the help of an example :

```
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8' />
    <title>Mindstick Software Private Limited</title>
    <style>
        h1 {
            color: black;
            text-align: center;
        }
        div {
            position: relative;
            animation: mind 10s infinite;
        }
        @keyframes mind {
            0% {
                top: 500px;
                width: 0px;
                font-size: 10px;
                transform: translate(0px) scale(1.4) rotate(80deg);
            }
            25% {
                top: 400px;
                background: yellow;
                font-size: 20px;
                width: 50px;
                transform: translate(100px) scale(1.3) rotate(60deg);
            }
            50% {
                top: 300px;
                background: orange;
                font-size: 30px;
                width: 150px;
                transform: translate(200px) scale(1.2) rotate(40deg);
            }
            75% {
                top: 200px;
                background: pink;
                width: 250px;
                font-size: 40px;
                transform: translate(300px) scale(1.1) rotate(20deg);
            }
            100% {
                top: 100px;
                background: red;
                font-size: 50px;
                width: 500px;
                transform: translate(400px) scale(1) rotate(0deg);
            }
        }
    </style>
</head>
<body>
    <div>
        <h1>Mindstick Software Private Limited</h1>
    </div>
</body>
</html>
```

Hope this will clear your confusion.\

Happy Coding!


---

Original Source: https://answers.mindstick.com/qa/93705/use-of-keyframe-rules-in-css

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
