Use of Keyframe Rules in CSS

0 votes
36 views
Ethan Karla asked 17 days ago in programming by Ethan Karla

What is the use of Keyframe Rules in CSS? Are keyframe rules useful for creating attractive websites?

1 Answer

0 votes
Shivam Prajapati answered 17 days ago 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!