site_8g/src/components/Box/animations.module.scss

$time: 0.8s;
.flashingAnimation {
  animation: flashing $time  linear infinite ;
}
@keyframes flashing {
  0%, 50% {
    opacity: 0;
  }
  50.01%, 100% {
    opacity: 1;
  }
}
.antiFlashingAnimation {
  animation: antiFlashing $time  linear infinite ;
  animation-delay: $time;
}
@keyframes antiFlashing {
  0%, 50% {
    opacity: 1;
  }
  50.01%, 100% {
    opacity: 0;
  }
}



.activeAnimation{
  animation: activing  0.3s ease  infinite alternate;
}
@keyframes activing {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.rotateAnimation{
  animation: rotating 10s  linear  infinite ;
}
@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(72deg);
  }

  40% {
    transform: rotate(144deg);
  }

  60% {
    transform: rotate(216deg);
  }

  80% {
    transform: rotate(288deg);
  }

  100% {
    transform: rotate(360deg);
  }

}

.floatAnimation {
  animation: floating 2s  ease  infinite alternate;
}
@keyframes floating {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(20px);
  }
}