<div class="box"></div>
@keyframes grow-and-shrink {
0% {
transform: scale(1);
}
100% {
transform: scale(1.5);
}
}
.box {
animation: grow-and-shrink 4000ms ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.box {
width: 100px;
height: 100px;
background: slateblue;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.