/*-----------------------------------*\
  #animation.css
\*-----------------------------------*/

/**
 * copyright 2022 @codewithsadee 
 */





.drop-anim {
    animation: drop 2.5s infinite;
    will-change: transform;
}

@keyframes drop {

  0%,
  20%,
  50%,
  80%,
  100% { transform: translateY(0); }
  40%  { transform: translateY(-30px); }
  60%  { transform: translateY(-15px); }

}

.smooth-zigzag-anim-1 {
    animation: smooth-zigzag-1 5s linear infinite;
    will-change: transform;
}

@keyframes smooth-zigzag-1 {

  0%,
  100% { transform: translate(0); }
  25%  { transform: translate(10px, 10px); }
  50%  { transform: translate( 5px,  5px); }
  75%  { transform: translate(10px, -5px); }

}

.smooth-zigzag-anim-2 {
    animation: smooth-zigzag-2 5s linear infinite;
    will-change: transform;
}

@keyframes smooth-zigzag-2 {

  0%,
  100% { transform: translate(0); }
  25%  { transform: translate(-10px, -10px); }
  50%  { transform: translate( -5px,  -5px); }
  75%  { transform: translate(-10px,   5px); }

}

.smooth-zigzag-anim-3 {
    animation: smooth-zigzag-3 5s linear infinite;
    will-change: transform;
}

@keyframes smooth-zigzag-3 {

  0%,
  100% { transform: translate(0); }
  25%  { transform: translate( -7px,  -7px); }
  50%  { transform: translate(-14px, -14px); }
  75%  { transform: translate( -7px,  -7px); }

}

.pulse-anim {
    animation: pulse 3s linear infinite;
    will-change: transform;
}

@keyframes pulse {

  0%,
  70%  { box-shadow: 0 0 0 0 hsla(0, 0%, 100%, 1); }
  100% { box-shadow: 0 0 0 15px transparent; }

}