.ripple-animation{animation-duration:var(--ripple-ani-duration);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-name:ripple}@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 0;
    }

    30% {
        opacity: 0.4;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}@keyframes ripple2 {
    0% {
        transform: scale(1);
        opacity: 0;
    }

    30% {
        opacity: 0.4;
    }

    100% {
        transform: scale(2.8);
        opacity: 0;
    }
}.fancy-animation{animation:morph 8s ease-in-out infinite}@keyframes morph {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }

    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
}.movingX{animation:movingX 8s linear infinite}@keyframes movingX {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(50px);
    }
    100% {
        transform: translateX(0);
    }
}.moving{animation:moving 8s linear infinite}@keyframes moving {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-50px);
    }
    100% {
        transform: translateX(0);
    }
}.jump{animation:jumpAni 7s linear infinite}@keyframes jumpAni {
    0% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    100% {
        transform: translateY(0);
    }
}.jump-reverse{animation:jumpReverseAni 7s linear infinite}@keyframes jumpReverseAni {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(30px);
    }
    100% {
        transform: translateY(0);
    }
}.spin{animation:spin 15s linear infinite}@keyframes spin {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}.bg-color-ani,.color-animate{animation:bgColor 6s linear infinite}@keyframes bgColor {
    0% {
        background-color: #F2BA4C;
    }
    25% {
        background-color: #81F24C;
    }
    50% {
        background-color: #41F27D;
    }
    75% {
        background-color: #0500FF;
    }
    100% {
        background-color: #F2BA4C;
    }
}// .svg-animate {//     animation: svgAnimate 80s linear infinite both;// }// @keyframes svgAnimate {//     0% {
//         transform: rotateZ(0);
//     }
//     50% {
//         transform: rotateZ(180deg);
//     }
//     100% {
//         transform: rotateZ(360deg);
//     }
// }// This is for Progress bar animation also has a js code
@keyframes animate-positive {0% {
        width: 0;
    }
}.scalein.th-animated{--animation-name:scalein}.slidetopleft.th-animated{--animation-name:slidetopleft}.slidebottomright.th-animated{--animation-name:slidebottomright}.slideinleft.th-animated{--animation-name:slideinleft}.slideinright.th-animated{--animation-name:slideinright}.slideinup.th-animated{--animation-name:slideinup}.slideindown.th-animated{--animation-name:slideindown}.rollinleft.th-animated{--animation-name:rollinleft}.rollinright.th-animated{--animation-name:rollinright}.scalein,.slidetopleft,.slidebottomright,.slideinleft,.slideinright,.slideindown,.slideinup,.rollinleft,.rollinright{opacity:0;animation-fill-mode:both;animation-iteration-count:1;animation-duration:1s;animation-delay:.3s;animation-name:var(--animation-name)}.th-animated{opacity:1}@keyframes slideinup {
    0% {
        opacity: 0;
        transform: translateY(70px);
    }

    100% {
        transform: translateY(0);
    }
}@keyframes slideinright {
    0% {
        opacity: 0;
        transform: translateX(70px);
    }

    100% {
        transform: translateX(0);
    }
}@keyframes slideindown {
    0% {
        opacity: 0;
        transform: translateY(-70px);
    }

    100% {
        transform: translateY(0);
    }
}@keyframes slideinleft {
    0% {
        opacity: 0;
        transform: translateX(-70px);
    }

    100% {
        transform: translateX(0);
    }
}@keyframes slidebottomright {
    0% {
        opacity: 0;
        transform: translateX(100px) translateY(100px);
    }

    100% {
        transform: translateX(0) translateY(0);
    }
}@keyframes slidetopleft {
    0% {
        opacity: 0;
        transform: translateX(-100px) translateY(-100px);
    }

    100% {
        transform: translateX(0) translateY(0);
    }
}