.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:.4}100%{transform:scale(1.8);opacity:0}}@keyframes ripple2{0%{transform:scale(1);opacity:0}30%{opacity:.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:0.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)}}