pathfinder/sass/layout/_animation.scss

// keyframes mixin
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

// slide in and show ==============================================================================
.pf-animation-slide-in {
  -moz-animation-duration: 1.2s;
  -webkit-animation-duration: 1.2s;
  -moz-animation-name: pfSlideIn;
  -webkit-animation-name: pfSlideIn;
  position:relative;
}

@include keyframes(pfSlideIn){
  from {
    opacity: 0;
    top: -20px;
  }

  to {
    opacity: 1;
    top:0px;
  }
};
// svg path draw ==================================================================================
.pf-animation-path-draw {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: pfPathDraw 3s linear alternate infinite;
}

@include keyframes(pfPathDraw){
  from {
    stroke-dashoffset: 500;
  }
  to {
    stroke-dashoffset: 0;
  }
}

// bubble =========================================================================================
@include keyframes(pfBubbleWobble){
  from {
    transform: scale(1, 1);
  }
  6.5% {
    transform: scale(1, 1.4);
  }
  13% {
    transform: scale(1.4, 1);
  }
  20% {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1, 1);
  }
}

@include keyframes(pfBubblePop){
  from {
    opacity: 1;
    transform: translateZ(0) scale(1, 1);
  }
  to {
    opacity: 0;
    transform: translateZ(0) scale(1.75, 1.75);
  }
}

// SVG pulse "fill" ===============================================================================
@include keyframes(pfPulseDanger){
  0% {
    fill: $red;
  }
  50% {
    fill: $red-darker;
  }
  100% {
    fill: $red;
  }
}

// pulse-out ======================================================================================
@mixin pf-pulse-keyframes($name, $color, $backgroundColor, $keepVisible: false){
  @include keyframes($name){
    0% {
      @if $keepVisible {
        color: inherit;
      }
    }
    10% {
      background-color: $backgroundColor;
      color: $color;
    }
    100% {
      @if $keepVisible {
        background-color: rgba($backgroundColor, 0.3);
      }
    }
  };
}

@mixin pf-pulse-Background($status, $keepVisible: false){
  $statusMap: (
    success: (
      color: $gray-dark,
      backgroundColor: $green-dark
    ),
    warning: (
      color: $gray-darker,
      backgroundColor: $orange
    ),
    danger: (
      color: $gray-darker,
      backgroundColor: $red
    )
  );

  $map: map-get($statusMap, $status);

  $name: pulseBackground + capitalize($status);
  $nameActive: $name + 'Active';

  $className: 'pf-animation-pulse-' + $status;
  @if $keepVisible {
    $className: str-insert($className, '-keep', -1);
    $name: str-insert($name, 'Keep', -1);
    $nameActive: str-insert($nameActive, 'Keep', -1);
  }

  @include pf-pulse-keyframes($name, map-get($map, 'color'), map-get($map, 'backgroundColor'), $keepVisible);
  @include pf-pulse-keyframes($nameActive, map-get($map, 'color'), darken(map-get($map, 'backgroundColor'), 5%), $keepVisible);

  .#{$className}{
    @include animation($name 1s 1);
    @include animation-timing-function(cubic-bezier(0.53, -0.03, 0.68, 0.38));
    will-change: color, background-color;
    animation-fill-mode: forwards;

    .sorting_1{
      @include animation($nameActive 1s 1);
      @include animation-timing-function(cubic-bezier(0.53, -0.03, 0.68, 0.38));
      will-change: color, background-color;
      animation-fill-mode: forwards;
    }
  }
}

@include pf-pulse-Background('success');
@include pf-pulse-Background('success', true);
@include pf-pulse-Background('warning');
@include pf-pulse-Background('warning', true);
@include pf-pulse-Background('danger');
@include pf-pulse-Background('danger', true);

// rotate =========================================================================================
.pf-animate-rotate{
  @include transition( all 0.08s linear );
}

.pf-animate-rotate.right{
  @include rotate( 90deg );
}

.pf-animate-rotate.left{
  @include rotate( -90deg );
}

// rainbow background =============================================================================
@keyframes rotateRainbow{
  0%{
    background-position-x: 0;
  }
  100%{
    background-position-x: 100vw;
  }
}

@mixin rainbow(){
  background: repeating-linear-gradient(-45deg, $green-light 0%, $teal-lighter 12.5%, $teal-lightest 25%, $green 37.5%, $green-light 50%);
  background-size:100vw 100vw;
  @include animation(rotateRainbow 3s infinite linear forwards);
}

// navigation link active/hover indicator =========================================================
@mixin pf-navigation-indicator($position){
  &:not(.disabled){
    position: relative; // otherwise :before indicator gets to height

    &:before {
      content: '';
      position: absolute;
      #{$position}: 0;
      background-color: $green;
      opacity: 0;
      @include transition( $position 0.15s ease-out, opacity 0.15s ease-out );
      will-change: opacity, $position;

      @if $position == 'left' {
        width: 2px;
        height: 100%;
      } @else if $position == 'top' {
        width: 100%;
        height: 2px;
      } @else if $position == 'bottom' {
        width: 100%;
        height: 2px;
      }
    }

    &:hover, &.active {
      &:before {
        #{$position}: -4px;
        opacity: 1;
      }
    }
  }
}