.ani,
.ahri {
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    animation-duration: 600ms;
    -webkit-animation-duration: 600ms;
}

/** fade */
@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade_in_left {
    0% {
        opacity: 0;
        transform: translate3d(-50px, 0, 0);
        -webkit-transform: translate3d(-50px, 0, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes fade_in_left {
    0% {
        opacity: 0;
        transform: translate3d(-50px, 0, 0);
        -webkit-transform: translate3d(-50px, 0, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
}

@keyframes fade_in_right {
    0% {
        opacity: 0;
        transform: translate3d(50px, 0, 0);
        -webkit-transform: translate3d(50px, 0, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes fade_in_right {
    0% {
        opacity: 0;
        transform: translate3d(50px, 0, 0);
        -webkit-transform: translate3d(50px, 0, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
}

@keyframes fade_in_bottom {
    0% {
        opacity: 0;
        transform: translate3d(0, 50px, 0);
        -webkit-transform: translate3d(0, 50px, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes fade_in_bottom {
    0% {
        opacity: 0;
        transform: translate3d(0, 50px, 0);
        -webkit-transform: translate3d(0, 50px, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
}

@keyframes fade_in_top {
    0% {
        opacity: 0;
        transform: translate3d(0, -50px, 0);
        -webkit-transform: translate3d(0, -50px, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes fade_in_top {
    0% {
        opacity: 0;
        transform: translate3d(0, -50px, 0);
        -webkit-transform: translate3d(0, -50px, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
}

@keyframes img_slide {
    0% {
        width: 0;
        height: 1%;
    }

    20%,
    25% {
        width: 6%;
        height: 1%;
    }

    35%,
    40% {
        width: 6%;
        height: 100%;
        opacity: 1;
    }

    65%,
    70% {
        width: 100%;
        height: 100%;
        left: 0;
    }

    100% {
        width: 100%;
        left: 100%;
        opacity: 0;
    }
}

@-webkit-keyframes img_slide {
    0% {
        width: 0;
        height: 1%;
    }

    20%,
    25% {
        width: 6%;
        height: 1%;
    }

    35%,
    40% {
        width: 6%;
        height: 100%;
        opacity: 1;
    }

    65%,
    70% {
        width: 100%;
        height: 100%;
        left: 0;
    }

    100% {
        width: 100%;
        left: 100%;
        opacity: 0;
    }
}

.fade,
.fade_in,
.fade_in_top,
.fade_in_left,
.fade_in_right,
.fade_in_bottom {
    opacity: 0;
}

.fade.animated {
    animation-name: fade;
    -webkit-animation-name: fade;
}

.fade_in_left.animated {
    animation-name: fade_in_left;
    -webkit-animation-name: fade_in_left;
}

.fade_in_right.animated {
    animation-name: fade_in_right;
    -webkit-animation-name: fade_in_right;
}


.fade_in.animated,
.fade_in_bottom.animated {
    animation-name: fade_in_bottom;
    -webkit-animation-name: fade_in_bottom;
}

.fade_in_top.animated {
    animation-name: fade_in_top;
    -webkit-animation-name: fade_in_top;
}

.img_slide {
    position: relative;
    overflow: hidden;
}

.img_slide::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #344454;
    animation-duration: 1.6s;
    -webkit-animation-duration: 1.6s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
}

.img_slide>.img__content {
    opacity: 0;
}

.img_slide.animated>.img__content {
    animation: fade 0.6s linear 1s 1 both;
}

.img_slide.animated::after {
    animation-name: img_slide;
    -webkit-animation-name: img_slide;
}