You have the ability to achieve this using the CSS3 Animation:
div {
width: 50px;
height: 50px;
background: #00f;
border-radius: 50%;
animation-name: shrink; /* "calling" the animation */
animation-duration: 1s; /* adjust */
animation-timing-function: linear; /* specifies the speed curve of an animation / also try other values */
animation-delay: 3s; /* adjust */
animation-fill-mode: forwards; /* retains in the state set by the last keyframe */
}
@keyframes shrink { /* let's call it "shrink" */
0% {width: 50px; height: 50px}
100% {width: 25px; height: 25px} /* final state */
}
<div><div>
Experiment and tailor this to your specific requirements.
Note: There are various other animation properties & values available for further exploration and customization.