Keyframes anim

by LĂ©o Durand

HTML

<div class="cc-2 circle"></div>
<div class="circle"></div>

CSS

.circle {
  width: 50px;
  height: 50px;
  border: 5px solid red;
  border-radius: 50%;
  transition: transform 2000ms, opacity 2000ms;
  opacity: 1;
  transform: scaleX(0.7) scaleY(0.7);
}

.circle.cc-2 {
  filter: blur(2px);
  opacity: 0.6;
  animation: circleAnim2 2.5s infinite;
  position: absolute;
}

@keyframes circleAnim2 {
  0% {
    transform: scaleX(1) scaleY(1);
    opacity: 0;
    filter: blur(4px);
  }
  10% {
    opacity: 0.5;
  }
  55% {
    filter: blur(0px);
  }
  85% {
    transform: scaleX(0.7) scaleY(0.7);
  }
  90% {
    opacity: 0;
  }
  100% {
    transform: scaleX(1) scaleY(1);
    opacity: 0;
  }
}