@include keyframes(zoomIn) {
    0% {
        opacity: 0;
        @include scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

@include keyframes(zoomInUp) {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) transform-translate3d(0, 1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) transform-translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) transform-translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) transform-translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInUp {
    -webkit-animation-name: zoomInUp;
    animation-name: zoomInUp;
}

@include keyframes(zoomInRight) {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) transform-translate3d(1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) transform-translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) transform-translate3d(-10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) transform-translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInRight {
    -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight;
}

@include keyframes(zoomInDown) {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) transform-translate3d(0, -1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) transform-translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) transform-translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) transform-translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown;
}

@include keyframes(zoomInLeft) {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) transform-translate3d(-1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) transform-translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) transform-translate3d(10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) transform-translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInLeft {
    -webkit-animation-name: zoomInLeft;
    animation-name: zoomInLeft;
}

@include keyframes(zoomOut) {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
        @include scale3d(0.3, 0.3, 0.3);
    }
    100% {
        opacity: 0;
    }
}

.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
}

@include keyframes(zoomOutUp) {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) transform-translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) transform-translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) transform-translate3d(0, -2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) transform-translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomOutUp {
    -webkit-animation-name: zoomOutUp;
    animation-name: zoomOutUp;
}

@include keyframes(zoomOutRight) {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) transform-translate3d(-42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) transform-translate3d(-42px, 0, 0);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(0.1) transform-translate3d(2000px, 0, 0);
        transform: scale(0.1) transform-translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center;
    }
}

.zoomOutRight {
    -webkit-animation-name: zoomOutRight;
    animation-name: zoomOutRight;
}

@include keyframes(zoomOutDown) {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) transform-translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) transform-translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) transform-translate3d(0, 2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) transform-translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomOutDown {
    -webkit-animation-name: zoomOutDown;
    animation-name: zoomOutDown;
}

@include keyframes(zoomOutLeft) {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) transform-translate3d(42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) transform-translate3d(42px, 0, 0);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(0.1) transform-translate3d(-2000px, 0, 0);
        transform: scale(0.1) transform-translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center;
    }
}

.zoomOutLeft {
    -webkit-animation-name: zoomOutLeft;
    animation-name: zoomOutLeft;
}