<div></div>
div {
margin: 50px auto;
width: 150px;
height: 150px;
background: black;
animation: color-change 2s ease-in-out 1s, width-change 3s ease-in 0s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
@keyframes color-change {
0% {
background: black;
}
100% {
background: red;
}
}
@keyframes width-change {
25% {
width: 200px;
}
100% {
width: 500px;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.