CSS3 > Animations

Animating background color in CSS3

How to animate background color using Keyframes in css


Changing background color 

Background color of the body is changed using keyframe animation pulse

<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>

In the above code snippet we are changing the background color of the body using  keyframe animation pulse , we have taken element as height and width with animation time as 2s, in the nextline we are having the keyframe pulse as 0%, 50%, 100% changes the color at that stage of the value which we have given 

output

 Views: 512 | Post Order: 106



Write for us