blink animation

by Max Kovalov

HTML

<div class="circle">
</div>

CSS

@keyframes blink {
  from {
    transform: scaleY(1);
    transform-origin: 50% 50%;
  }
  48% {transform: scaleY(1);}
  50% {transform: scaleY(0.01);}
  52% {transform: scaleY(1);}
  to {transform: scaleY(1);}
}

.circle {
  display: block;
  width: 50px;
  height: 100px;
  background: red;
  border-radius: 50%;
  transform-origin: 50% 50% 0;
  animation: blink 5s linear 2s infinite alternate;
}