Keyframes Examples in CSS

Last updated on October 5, 2019

Definition :

It means change the background color to the operation using animations.

Program 1 :

<html>

@keyframes ex

{

from {background-color: red;}

to {background-color: green}

}

div

{

width: 100px;

height: 100px;

background-color: red;

animation-name: ex;

animation-duration: 4s;

}

</style>

<body>

<div>

</div>

</body>

</html>

Program 2 :

<html>

@keyframes ex

{

0% {background-color: red; left: 0px; top: 0px;}

50% {background-color: green; left: 100px; top: 100px;}

100% {background-color: cyan; left: 0px; top: 0pxx;}

}

div

{

width: 100px;

height: 100px;

position: relative;

background-color: red;

animation-name: ex;

animation-duration: 4s;

animation:iteration-count: 3;

animation-delay: 2s;

}