JSFiddle - React, Tailwind, and code Playground
by Dmitry Batrakov
HTML
<div class="circle"></div>
CSS
.circle {
background: #efefef;
border-radius: 100%;
width: 100px;
height: 100px;
-moz-transform: scale(0.5, 0.5);
-moz-animation: pulsing 2s infinite; /* IE 10+ */
-webkit-transform: scale(0.5, 0.5);
-webkit-animation: pulsing 2s infinite; /* IE 10+ */
-ms-transform: scale(0.5, 0.5);
-ms-animation: pulsing 2s infinite; /* IE 10+ */
-o-transform: scale(0.5, 0.5);
-o-animation: pulsing 2s infinite; /* IE 10+ */
}
@-moz-keyframes pulsing {
0% { -moz-transform: scale(0.5, 0.5)}
50% { -moz-transform: scale(1.0, 1.0); }
100% { -moz-transform: scale(0.5, 0.5);}
}
@-webkit-keyframes pulsing {
0% { -webkit-transform: scale(0.5, 0.5)}
50% { -webkit-transform: scale(1.0, 1.0); }
100% { -webkit-transform: scale(0.5, 0.5);}
}
@-ms-keyframes pulsing {
0% { -ms-transform: scale(0.5, 0.5)}
50% { -ms-transform: scale(1.0, 1.0); }
100% { -ms-transform: scale(0.5, 0.5);}
}
@-o-keyframes pulsing {
0% { -o-transform: scale(0.5, 0.5)}
50% { -o-transform: scale(1.0, 1.0); }
100% { -o-transform: scale(0.5, 0.5);}
}