<div></div>
div{
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate-reverse;
/* animation-direction: alternate */
}
/* @keyframes example{
from {background: red}
to{background: blue}
} */
@keyframes example{
0% {background: red; left: 0px; top: 0px}
25% {background: blue; left: 200px; top: 0px}
50% {background: green;left: 200px; top: 200px}
75% {background: yellow;left: 0px; top: 200px}
100% {background: red;left: 0px; top: 0px}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.