<div>Animation</div>
@keyframes change-bg-color {
from {
background-color: white;
}
to {
background-color: darkviolet;
}
}
div {
padding: 10px;
margin: auto;
border: 2px solid darkviolet;
border-radius: 10px;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif;
color: darkviolet;
width: 200px;
animation-name: change-bg-color;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-delay: 2s;
animation-iteration-count: 3;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.