.fade-show {
    animation: fade-show 2s linear 3s infinite alternate;
    -webkit-animation: fade-show 2s linear 3s infinite alternate;
}

@keyframes fade-show {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.3;
    }
}

.rorate360 {
    animation: rorate360 2s ease-out 0s 1;
    -webkit-animation: rorate360 2s ease-out 0s 1;
}

@keyframes rorate360 {
    0% {
        transform: rotate(0);
        /* filter: blur(4px); */
    }
    100% {
        transform: rotate(360deg);
        /* filter: blur(0px); */
    }
}

.rorate360-1 {
    animation: rorate360-1 2s ease-out 0s 1;
    -webkit-animation: rorate360-1 2s ease-out 0s 1;
}

@keyframes rorate360-1 {
    0% {
        transform: rotate(180deg);
        /* filter: blur(4px); */
    }
    100% {
        transform: rotate(360deg);
        /* filter: blur(0px); */
    }
}

.black2white {
    animation: black2white 1s ease-out 0s 1;
    -webkit-animation: black2white 1s ease-out 0s 1;
    animation-fill-mode: forwards;
}

@keyframes black2white {
    0% {
        color: #000;
    }
    100% {
        color: #fff;
    }
}

.left-in {
    animation: left-in 1s ease-out 0s 1;
    animation-fill-mode: forwards;
}

@keyframes left-in {
    0% {
        transform: translateX(-300px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.right-in {
    animation: right-in 1s ease-out 0s 1;
    animation-fill-mode: forwards;
}

@keyframes right-in {
    0% {
        transform: translateX(300px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}