@charset "UTF-8";

//-----------------------------------------------------
// animate.scss
// 提供6组动画 fade-in/out, shrink-in/out, up-in/out, down-in/out, left-in/out, right-in/out
//-----------------------------------------------------

%animation-basic {
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

// fade in/out
//-----------------------------------------------------

@mixin animation-fade-in($className: fade, $from: 0) {
    $name: str-insert(In, $className, 0);

    .#{$className}-in {
        animation-name: $name;
        @extend %animation-basic;
    }
    @keyframes #{$name} {
        0% {
            opacity: $from;
        }
        100% {
            opacity: 1;
        }
    }
}

@mixin animation-fade-out($className: fade, $to: 0) {
    $name: str-insert(Out, $className, 0);

    .#{$className}-out {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 1;
        }
        100% {
            opacity: $to;
        }
    }
}

// shrink in/out
//-----------------------------------------------------

@mixin animation-shrink-in($className: shrink, $from: 0.815) {
    $name: str-insert(In, $className, 0);
    
    .#{$className}-in {
        animation-name: $name;
        @extend %animation-basic;
    }
    @keyframes #{$name} {
        0% {
            opacity: 0;
            transform: scale($from);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
}

@mixin animation-shrink-out($className: shrink, $to: 1.185) {
    $name: str-insert(Out, $className, 0);

    .#{$className}-out {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 1;
            transform: scale(1);
        }
        100% {
            opacity: 0;
            transform: scale($to);
        }
    }
}

// down in/out
//-----------------------------------------------------

@mixin animation-down-in($className: down, $value: 100%) {
    $name: str-insert(In, $className, 0);
    
    .#{$className}-in {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 0;
            transform: translate(0, $value);
        }
        100% {
            opacity: 1;
            transform: translate(0, 0);
        }
    }
}

@mixin animation-down-out($className: down, $value: 100%) {
    $name: str-insert(Out, $className, 0);

    .#{$className}-out {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 1;
            transform: translate(0, 0);
        }
        100% {
            opacity: 0;
            transform: translate(0, $value);
        }
    }
}

// up in/out
//-----------------------------------------------------

@mixin animation-up-in($className: up, $value: -100%) {
    $name: str-insert(In, $className, 0);
    
    .#{$className}-in {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 0;
            transform: translate(0, $value);
        }
        100% {
            opacity: 1;
            transform: translate(0, 0);
        }
    }
}

@mixin animation-up-out($className: up, $value: -100%) {
    $name: str-insert(Out, $className, 0);

    .#{$className}-out {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 1;
            transform: translate(0, 0);
        }
        100% {
            opacity: 0;
            transform: translate(0, $value);
        }
    }
}

// left in/out
//-----------------------------------------------------

@mixin animation-left-in($className: left, $value: -100%) {
    $name: str-insert(In, $className, 0);
    
    .#{$className}-in {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 0;
            transform: translate($value, 0);
        }
        100% {
            opacity: 1;
            transform: translate(0, 0);
        }
    }
}

@mixin animation-left-out($className: left, $value: -100%) {
    $name: str-insert(Out, $className, 0);

    .#{$className}-out {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 1;
            transform: translate(0, 0);
        }
        100% {
            opacity: 0;
            transform: translate($value, 0);
        }
    }
}

// right in/out
//-----------------------------------------------------

@mixin animation-right-in($className: right, $value: 100%) {
    $name: str-insert(In, $className, 0);
    
    .#{$className}-in {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 0;
            transform: translate($value, 0);
        }
        100% {
            opacity: 1;
            transform: translate(0, 0);
        }
    }
}

@mixin animation-right-out($className: right, $value: 100%) {
    $name: str-insert(Out, $className, 0);

    .#{$className}-out {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 1;
            transform: translate(0, 0);
        }
        100% {
            opacity: 0;
            transform: translate($value, 0);
        }
    }
}