$cubic-bezier: cubic-bezier(0,0,0.21,1);
$swiftOut: cubic-bezier(0.175, 0.885, 0.32, 1.275);
$animation-duration: .15s;
$transition: $animation-duration $cubic-bezier;

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

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

@keyframes scaleIn {
    0% {
        transform: scale(0,0);
    }
    100% {
        transform: scale(1,1);
    }
}

@keyframes slideIn {
    0% {
        transform: translate3d(100%, 0%, 0);
    }
    100% {
        transform: translate3d(0%, 0%, 0);
    }
}

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

@keyframes loading {
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}

@mixin fade-in($duration: $animation-duration, $bezier: $cubic-bezier) {
    @include backface-hack();
    opacity: 0;
    will-change: opacity;
    animation: fadeIn $duration $bezier forwards;
}

@mixin fade-out($duration: $animation-duration, $bezier: $cubic-bezier) {
    @include backface-hack();
    opacity: 1;
    will-change: opacity;
    animation: fadeOut $duration $bezier forwards;
}

@mixin scale-in($duration: $animation-duration, $bezier: $cubic-bezier) {
    perspective: 500px;
    transform: scale3d(0,0,0);
    will-change: transform;
    animation: scaleIn $duration $bezier forwards;
}

@mixin slide-in($duration: $animation-duration, $bezier: $cubic-bezier) {
    will-change: transform;
    animation: slideIn $duration $bezier forwards;
}

@mixin loading() {
  animation: loading 1s linear infinite;
  animation-fill-mode: forwards;
  background: color('loading', 'initial');
  background: linear-gradient(to right, color('loading', 'initial') 8%, color('loading', 'final') 18%, color('loading', 'initial') 33%);
  background-size: 400% 400%;
  color: transparent;
  border: 0;
  outline: 0;
}