<div class="circle"></div>
body {
margin: 40px;
}
.circle {
background: green;
border-radius: 100%;
width: 100px;
height: 100px;
animation: pulsing 2s infinite;
animation: pulsing 2s infinite;
}
@-webkit-keyframes pulsing {
0% {
transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5)
}
50% {
transform: scale(1.0, 1.0);
transform: scale(1.0, 1.0);
}
100% {
transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
}
}
@keyframes pulsing {
0% {
transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5)
}
50% {
transform: scale(1.0, 1.0);
transform: scale(1.0, 1.0);
}
100% {
transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.