Use of Keyframe Rules in CSS

Asked 15-Jul-2021
Viewed 248 times


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

1 Answer


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 { 
Let's understand with the help of an example :   
<!DOCTYPE html>

<html lang='en' xmlns=''>
    <meta charset='utf-8' />
    <title>Mindstick Software Private Limited</title>
        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);
        <h1>Mindstick Software Private Limited</h1>

Hope this will clear your confusion.

Happy Coding!