OwlCyberSecurity - MANAGER

Edit File: _animation.scss

.ripple-animation {
  animation-duration: var(--ripple-ani-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-name: ripple;
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0;
  }

30% {
    opacity: 0.4;
  }

100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.movingX {
  animation: movingX 8s linear infinite;
}
@keyframes movingX {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}

.jump {
  animation: jumpAni 7s linear infinite;
}
@keyframes jumpAni {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}

.jump-reverse {
  animation: jumpReverseAni 7s linear infinite;
}
@keyframes jumpReverseAni {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(30px);
  }
  100% {
    transform: translateY(0);
  }
}

.spin {
  animation: spin 15s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(40deg);
  }
  100% {
    transform: rotate(0);
  }
}

// This is for Progress bar animation also has a js code
@keyframes animate-positive {
  0% {
    width: 0; 
  } 
}

.scalein.th-animated {
  --animation-name: scalein;
}

.slidetopleft.th-animated {
  --animation-name: slidetopleft;
}

.slidebottomright.th-animated {
  --animation-name: slidebottomright;
}

.slideinleft.th-animated {
  --animation-name: slideinleft;
}

.slideinright.th-animated {
  --animation-name: slideinright;
}

.slideinup.th-animated {
  --animation-name: slideinup;
}

.slideindown.th-animated {
  --animation-name: slideindown;
}
.rollinleft.th-animated {
  --animation-name: rollinleft;
}
.rollinright.th-animated {
  --animation-name: rollinright;
}

.slidetopleft,
.slidebottomright,
.slideinleft,
.slideinright,
.slideindown,
.slideinup,
.rollinleft,
.rollinright {
  opacity: 0;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-duration: 1s;
  animation-delay: 0.3s;
  animation-name: var(--animation-name);
}

.th-animated {
  opacity: 1;
}

@keyframes slideinup {
  0% {
    opacity: 0;
    transform: translateY(70px);
  }

100% {
    transform: translateY(0);
  }
}

@keyframes slideinright {
  0% {
    opacity: 0;
    transform: translateX(70px);
  }

100% {
    transform: translateX(0);
  }
}

@keyframes slideindown {
  0% {
    opacity: 0;
    transform: translateY(-70px);
  }

100% {
    transform: translateY(0);
  }
}

@keyframes slideinleft {
  0% {
    opacity: 0;
    transform: translateX(-70px);
  }

100% {
    transform: translateX(0);
  }
}

@keyframes slidebottomright {
  0% {
    opacity: 0;
    transform: translateX(100px) translateY(100px);
  }

100% {
    transform: translateX(0) translateY(0);
  }
}

@keyframes slidetopleft {
  0% {
    opacity: 0;
    transform: translateX(-100px) translateY(-100px);
  }

100% {
    transform: translateX(0) translateY(0);
  }
}
.scalein {
  animation: scalein 7s linear infinite;
}
@keyframes scalein {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  
  100% {
    transform: scale(1);

}
}

@keyframes rollinleft {
  0% {
      opacity: 0;
      transform: translateX(-100%) rotate(-120deg);
  }
  to {
      transform: translateX(0) rotate(0deg);
  }
}
@keyframes rollinright {
  0% {
      opacity: 0;
      transform: translateX(100%) rotate(120deg);
  }
  to {
      transform: translateX(0) rotate(0deg);
  }
}
.fancy-animation {
  animation: morph 8s ease-in-out infinite;
}

@keyframes morph {
  0% {
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }

50% {
      border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }

100% {
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
}
@keyframes jumpIcon {
  0% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-8px);
  }
  100% {
      transform: translateY(0);
  }
}