.ani_hoverpause:hover {
    animation-play-state: paused;
}
.ani_hoverplay {
    animation-play-state: paused;
}
.ani_hoverplay:hover {
    animation-play-state: running;
}

.ani_play1 {
    animation-iteration-count: 1 !important;
}
.any_rotateY {
    transition: transform 0.5s ease;
    transform-style: preserve-3d;
}

.any_rotateY:hover {
    transform: rotateY(180deg);
}

.ani_rotate {
    animation-name: ani_rotate_5deg;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    transform-origin: center center;
}
.ani_rotate_left {
    animation-name: ani_rotate_5deg;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    transform-origin: left;
}
.ani_rotate_right {
    animation-name: ani_rotate_5deg;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    transform-origin: right;
}
.ani_rotate_360 {
    animation-name: ani_rotate_360;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    transform-origin: center center;
}
.ani_rotate_circle {
    animation-name: ani_rotate_circle;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    transform-origin: center center;
    transform: translate(180px);
}
.ani_demo1 {
    animation-name: ani_demo1;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    position: absolute;
}
.ani_flip_y {
    animation-name: ani_flip_y;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    position: absolute;
}
.ani_flip_x {
    animation-name: ani_flip_x;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    position: absolute;
}
@keyframes ani_flip_y {
    0% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(-1);
    }

    100% {
        transform: scaleY(1);
    }
}
@keyframes ani_flip_x {
    0% {
        transform: scaleX(1);
    }

    50% {
        transform: scaleX(-1);
    }

    100% {
        transform: scaleX(1);
    }
}
    @keyframes ani_demo1 {
    0% {
        left:-50px;
        top:-50px;
    }
    25% {
        left: 50px ;
        top: -50px;
    }
    50% {
        left: 50px;
        top: 50px;
    }
    75% {
        left: -50px;
        top: 50px;
    }
    100% {
        left: -50px;
        top: -50px;
    }
}
@keyframes ani_rotate_5deg {
    0% {
        transform: rotate(5deg);
    }
    50% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(5deg);
    }
}
@keyframes ani_rotate_360 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
@keyframes ani_rotate_circle {
    0% {
        transform: rotate(0deg) scale(0.8) translate(180px);
    }

    100% {
        transform: rotate(-360deg) scale(0.8) translate(100px);
    }
}

.ani_shake {
    animation-name: ani_top10;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    position: absolute;
}
.ani_shake_left {
    animation-name: ani_left10;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    position: absolute;
}
.ani_fast {
    animation-duration: 0.1s !important;
}
.ani_1s {
    animation-duration: 1s !important;
}
.ani_2s {
    animation-duration: 2s !important;
}
.ani_3s {
    animation-duration: 3s !important;
}
.ani_4s {
    animation-duration: 4s !important;
}
.ani_5s {
    animation-duration: 5s !important;
}
.ani_10s {
    animation-duration: 10s !important;
}
.ani_20s {
    animation-duration: 20s !important;
}
@keyframes ani_top10 {
    0% {
        top: -10px;
    }
    50% {
        top: 10px;
    }
    100% {
        top: -10px;
    }    
}
@keyframes ani_left10 {
    0% {
        left: -10px;
    }
    50% {
        left: 10px;
    }
    100% {
        left: -10px;
    }
}
.ani_fadein {
    animation: ani_fadein 1.2s ease-out 0.3s backwards;
}
.ani_fadeout {
    animation: ani_fadeout 1.2s ease-out 0.3s forwards;
    animation-iteration-count: 1;
}
@keyframes ani_fadein {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes ani_fadeout {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);        
    }
}


.ani_scale {
    animation-name: ani_scale;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    transform-origin: center center;
}

.ani_fallcenter {
    position: fixed;
    top: 50%;
    left: 50%;
    Transform: translate(-50%, -50%);
    animation: ani_fallcenter 1s ease-in-out;
}

@keyframes ani_fallcenter {
    0% {
        top: -10%;
    }
    25% {
        top: 50%;
    }
    100% {
        top: 50%;
    }
}


@keyframes ani_scale {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}
.ani_heartbeat {
    animation-name: ani_heartbeat;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    transform-origin: center center;
}
@keyframes ani_heartbeat {
    0% {
        transform: scale(1.1);
    }

    75% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

.ani_rotate365 {
    animation-name: ani_rotate365;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
}

@keyframes ani_rotate365 {
    0% {
        transform: rotateZ(0deg);
    }

    25% {
        transform: rotateZ(90deg);
    }

    50% {
        transform: rotateZ(180deg);
    }

    75% {
        transform: rotateZ(270deg);
    }

    100% {
        transform: rotateZ(365deg);
    }
}

@keyframes ani_fadeinOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}