@-webkit-keyframes bounce_one { 0% { transform: translateY(-0.95rem); } 50% { transform: translateY(0.95rem); } 100% { transform: translateY(-0.95rem); } } @keyframes bounce_one { 0% { transform: translateY(-0.95rem); } 50% { transform: translateY(0.95rem); } 100% { transform: translateY(-0.95rem); } } @-webkit-keyframes morph{ 0%, 100% { border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%; } 34% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; } 67% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; } } @keyframes morph{ 0%, 100% { border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%; } 34% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; } 67% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; } } @keyframes spin{ 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /*** ============================================= circle Css ============================================= ***/ @-webkit-keyframes circle { 0% { opacity: 1; } 40% { opacity: 1; } 100% { width: 200%; height: 200%; opacity: 0; } } @keyframes circle { 0% { opacity: 1; } 40% { opacity: 1; } 100% { width: 200%; height: 200%; opacity: 0; } } @-webkit-keyframes toBottomFromTop { 49% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 50% { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); } 51% { opacity: 1; } } @keyframes toBottomFromTop { 49% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 50% { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); } 51% { opacity: 1; } } @keyframes box-image-pop { 50% { font-size: 45px; } } @-webkit-keyframes jumpping { 0%,100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 40% { -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, var(--jump-y, 50px), var(--jump-x, 0)) } } @keyframes jumpping { 0%,100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 40% { -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0) } } @-webkit-keyframes animName { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes animName { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes animNameTwo { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes animNameTwo { 0% { transform:translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @-webkit-keyframes upNdown11 { 50% { transform: translateY(5px) } } @keyframes upNdown11 { 50% { transform: translateY(5px) } } @-webkit-keyframes upNdown12 { 50% { transform: translateY(-5px) } } @keyframes upNdown12 { 50% { transform: translateY(-5px) } } @-webkit-keyframes ast_pulse { 0% { -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); opacity: 0; } } @keyframes ast_pulse { 0% { -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); opacity: 0; } } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* ---------------- KEYFRAMES ----------------- */ @-webkit-keyframes loader-1-outter { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-1-outter { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes loader-1-inner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes loader-1-inner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } /*Rotate*/ @-webkit-keyframes rotation{ 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } @keyframes rotation{ 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } @-webkit-keyframes criss-cross-left { 0% { left: -20px; } 50% { left: 50%; width: 20px; height: 20px; } 100% { left: 50%; width: 375px; height: 375px; } } @keyframes criss-cross-left { 0% { left: -20px; } 50% { left: 50%; width: 20px; height: 20px; } 100% { left: 50%; width: 375px; height: 375px; } } @-webkit-keyframes criss-cross-right { 0% { right: -20px; } 50% { right: 50%; width: 20px; height: 20px; } 100% { right: 50%; width: 375px; height: 375px; } } @keyframes criss-cross-right { 0% { right: -20px; } 50% { right: 50%; width: 20px; height: 20px; } 100% { right: 50%; width: 375px; height: 375px; } } @-webkit-keyframes zoom{ from{ transform: scale(1); } to{ transform: scale(1.3); } } @keyframes zoom{ from{ transform: scale(1); } to{ transform: scale(1.3); } }