<div class="box"></div>
.box {
background-color: #f00;
width: 100px;
height: 50px;
animation-name: anime1;
animation-duration: 4s;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-delay: 0s;
}
@keyframes anime1 {
0% {
height: 50px;
}
25% {
height: 100px;
background-color: #e3e612;
}
50% {
height: 150px;
background-color: #3f3;
}
75% {
height: 100px;
background-color: #12b5e6;
}
100% {
height: 50px;
background-color: #5a12e6;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.