CSS3 Changing background color using keyframe example

Write code here

J | B | A

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .element {
            width: 350px;
            height: 300px;
            /*for chrome and safari*/
            -webkit-animation: pulse 2s infinite;
            
            /*for firefox*/
            -moz-animation: pulse 2s infinite;
        
            /* for opera*/
            -o-animation: pulse 2s infinite;
            
            /*Standard syntax*/
            animation: pulse 2s infinite;
            }

@-webkit-keyframes pulse {
            0% {
                background-color: pink;
            }

50% {
                background-color: yellow;
            }

100% {
                background-color: green;
            }
        }

@-moz-keyframes pulse {
            0% {
                background-color: pink;
            }

50% {
                background-color: yellow;
            }

100% {
                background-color: green;
            }
        }
         @-o-keyframes pulse {
            0% {
                background-color: pink;
            }

50% {
                background-color: yellow;
            }

100% {
                background-color: green;
            }
        }
           @keyframes pulse {
            0% {
                background-color: pink;
            }

50% {
                background-color: yellow;
            }

100% {
                background-color: green;
            }
        }
    </style>
</head>
<body>
    <p>Changing background color using keyframe animation </p>
    <div class="element" style="text-align:center;">TechFunda</div>
</body>
</html>

Note: We DO NOT save your trial code in our database.

CSS3 > Changing Background Color Using Keyframe

Write code here

Output