relayers-network-ui/assets/styles/_animations.scss

@mixin animation-full-rotate {
  @keyframes animation-full-rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
@mixin animation-full-rotate-negative {
  @keyframes animation-full-rotate-negative {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg);
    }
  }
}

@mixin animation-walk {
  @keyframes animation-walk {
    0% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }
}

@mixin animation-from-invisible {
  @keyframes animation-from-invisible {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
}

@mixin animation-transform-line {
  @keyframes animation-transform-line {
    0% {
      opacity: 0;
      transform: translateX(-20rem);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

@mixin stroke-spacing-top {
  @keyframes stroke-spacing-top {
    0% {
      stroke-dashoffset: 2000;
    }
    50% {
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dashoffset: -2000;
    }
  }
}

@mixin stroke-spacing-bottom {
  @keyframes stroke-spacing-bottom {
    0% {
      stroke-dashoffset: -2000;
    }
    50% {
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dashoffset: 2000;
    }
  }
}