.fuwa{
    opacity: 0;
    transform: translateX(-100%);
}
.rev .fuwa{
    transform: translateX(100%);
}
.active_effect .fuwa{
    animation: fuwa .7s ease-out forwards;
}
@keyframes fuwa {
    0%{
        opacity: 0;
    }
    70%{
        opacity: .1;
    }

    100%{
        opacity: 1;
        transform: translateX(0%);
    }
}

.blur_img{
    filter: blur(1rem);
    transition: all 0.2s linear;
}
.active_effect .blur_img{
    filter: blur(0);
    transition: all .8s linear;
}

.rotate_img{
    transform: rotateY(0);
    transition: all 0.2s linear;
}
.active_effect .rotate_img{
    transform: rotateY(-360deg);
    transition: all 1.7s cubic-bezier(.08,1.05,.3,1.13);
}

.active_effect .flipLeft{
    animation-name: flipLeft;animation-duration:0.5s;animation-fill-mode:forwards;perspective-origin: left center;
}
@keyframes flipLeft{from { transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);}
    to {transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);opacity: 1;}
}