Online: 9774
Online: 9774
Online: 9774
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
