SCSS Animations Utils

_animations.scss

@include keyframes(fadeIn) {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@include keyframes(fadeOut) {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@include keyframes(fadeInUp) {
    0% {
        opacity: 0;
        @include transform(translate3d(0, 30px, 0));
    }
    100% {
        opacity: 1;
        @include transform(none);
    }
}

@include keyframes(animateTilt) {
    0% {
      width: 100%;
    }
    100% {
      width: 0%;
    }
}

@include keyframes(animateMaskLeft) {
    0% {
        -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    }
    80% {
        -webkit-clip-path: polygon(0 0, 100% 0%, 0% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0%, 100% 0%, 0% 100%);
    }
    100% {
        -webkit-clip-path: polygon(0 0, 0% 0%, 0% 100%, 0% 100%);
        clip-path: polygon(0 0, 0% 0%, 100% 0%, 0% 100%);
    }
}

@include keyframes(animateMaskRight) {
    0% {
        -webkit-clip-path: polygon(0 0, 0% 0%, 0% 100%, 0% 100%);
        clip-path: polygon(0 0, 0% 0%, 100% 0%, 0% 100%);
    }
    80% {
        -webkit-clip-path: polygon(0 0, 100% 0%, 0% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0%, 100% 0%, 0% 100%);
    }
    100% {
       -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
       clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    }
}

@include keyframes(blurIn) {
  0% {
    @include blur(0);
  }
  100% {
    @include blur(5px);
  }
}