.animation-delay-100 { animation-delay: 200ms !important; } .animation-delay-200 { animation-delay: 300ms !important; } .animation-delay-300 { animation-delay: 400ms !important; } .animation-delay-400 { animation-delay: 500ms !important; } .animation-delay-500 { animation-delay: 600ms !important; } .animation-delay-600 { animation-delay: 700ms !important; } .animation-delay-700 { animation-delay: 800ms !important; } .animation-delay-800 { animation-delay: 900ms !important; } .animation-delay-900 { animation-delay: 1000ms !important; } .animation-delay-1s { animation-delay: 1s !important; } .animation-delay-1100 { animation-delay: 1.1s !important; } .animation-delay-1200 { animation-delay: 1.2s !important; } .animation-delay-1600 { animation-delay: 1.6s !important; } .animation-delay-2s { animation-delay: 2s !important; } .animation { transition: ease-in-out; transition-duration: 0.2s; } .animation-unset { animation: unset !important; transform: scaleY(1); opacity:1; } .opacity-0 { opacity: 0; } @keyframes floatAnimation { 0% { bottom: 50px; } 50% { bottom: 30px; } 100% { bottom: 50px; } } .floatingElement { animation: floatAnimation 3s infinite ease-in-out; position: relative; } @-webkit-keyframes slide-out-bck-center { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } 100% { -webkit-transform: translateZ(-1100px); transform: translateZ(-1100px); opacity: 0; } } @keyframes slide-out-bck-center { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } 100% { -webkit-transform: translateZ(-1100px); transform: translateZ(-1100px); opacity: 0; } } @-webkit-keyframes slide-out-bottom { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 100% { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0; } } @keyframes slide-out-bottom { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 100% { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0; } } @-webkit-keyframes slide-out-bck-center { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } 100% { -webkit-transform: translateZ(-1100px); transform: translateZ(-1100px); opacity: 0; } } @keyframes slide-out-bck-center { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } 100% { -webkit-transform: translateZ(-1100px); transform: translateZ(-1100px); opacity: 0; } } .slide-in-bottom { -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both; animation: slide-in-bottom 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both; } @-webkit-keyframes slide-in-bottom { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes slide-in-bottom { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .swing-in-top-fwd { -webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both; animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both; } @-webkit-keyframes swing-in-top-fwd { 0% { -webkit-transform: rotateX(-100deg); transform: rotateX(-100deg); -webkit-transform-origin: top; transform-origin: top; opacity: 0; } 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform-origin: top; transform-origin: top; opacity: 1; } } @keyframes swing-in-top-fwd { 0% { -webkit-transform: rotateX(-100deg); transform: rotateX(-100deg); -webkit-transform-origin: top; transform-origin: top; opacity: 0; } 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform-origin: top; transform-origin: top; opacity: 1; } } .shadow-drop-2-center { -webkit-animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } @-webkit-keyframes shadow-drop-2-center { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } 100% { -webkit-transform: translateZ(50px); transform: translateZ(50px); -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35); box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35); } } @keyframes shadow-drop-2-center { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); opacity:0; } 100% { -webkit-transform: translateZ(50px); transform: translateZ(50px); -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35); box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35); opacity: 1; } } .scale-in-center { -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } @-webkit-keyframes scale-in-center { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes scale-in-center { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .slide-in-fwd-left { opacity: 0; transform: translateZ(-1400px) translateX(-1000px); -webkit-animation: slide-in-fwd-left 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-fwd-left 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } @-webkit-keyframes slide-in-fwd-left { 0% { -webkit-transform: translateZ(-1400px) translateX(-1000px); transform: translateZ(-1400px) translateX(-1000px); opacity: 0; } 100% { -webkit-transform: translateZ(0) translateX(0); transform: translateZ(0) translateX(0); opacity: 1; } } @keyframes slide-in-fwd-left { 0% { -webkit-transform: translateZ(-1400px) translateX(-1000px); transform: translateZ(-1400px) translateX(-1000px); opacity: 0; } 100% { -webkit-transform: translateZ(0) translateX(0); transform: translateZ(0) translateX(0); opacity: 1; } } .slide-in-right { -webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards; animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards; } @-webkit-keyframes slide-in-right { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes slide-in-right { 0% { -webkit-transform: translateX(1000px); transform: translateX(1000px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } .slide-out-left { -webkit-animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; } @-webkit-keyframes slide-out-left { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(-1000px); transform: translateX(-1000px); opacity: 0; } } @keyframes slide-out-left { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(-1000px); transform: translateX(-1000px); opacity: 0; } } .opacity-animation { opacity: 0; -webkit-animation: opacity-load 400ms ease-in forwards; animation: opacity-load 400ms ease-in forwards; } @keyframes opacity-load { 0% { opacity: 0; } 100% { opacity: 100; } } @keyframes opacity-load-20 { 0% { opacity: 0; } 100% { opacity: .5; } } .fade-out { -webkit-animation: fade-out 400ms ease-in forwards; animation: fade-out 400ms ease-in forwards; opacity: 100; } @keyframes fade-out { 0% { opacity: 100; } 100% { opacity: 0; } } .top-opacity-load { opacity: 0; animation: top-opacity-load 400ms cubic-bezier(0.390, 0.575, 0.565, 1.000) forwards; } @keyframes top-opacity-load { 0% { transform: translateY(-30px); opacity: 0; } 100% { transform: translateY(0); opacity: 100; } } .side-opacity-load { opacity: 0; animation: side-opacity-load 400ms ease-in forwards; -webkit-animation: side-opacity-load 400ms ease-in forwards; } @keyframes side-opacity-load { 0% { transform: translateX(-15px); opacity: 0; } 100% { transform: translateX(0); opacity: 100; } } .right-side-opacity-load { animation: right-side-opacity-load 400ms ease-in forwards; -webkit-animation: right-side-opacity-load 400ms ease-in forwards; opacity: 0; } @keyframes right-side-opacity-load { 0% { transform: translateX(15px); opacity: 0; } 100% { transform: translateX(0); opacity: 100; } } .flip-horizontal-top { animation: flip-horizontal-top 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } @keyframes flip-horizontal-top { 0% { -webkit-transform: rotateX(0); transform: rotateX(0); } 50% { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); opacity:1; } 100% { -webkit-transform: rotateX(0); transform: rotateX(0); opacity: 1; } } .vibrate-1 { animation: vibrate-1 .4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both infinite; } @-webkit-keyframes vibrate-1 { 0% { -webkit-transform: translate(0); transform: translate(0); } 20% { -webkit-transform: translate(-.5px, .5px); transform: translate(-.5px, .5px); } 40% { -webkit-transform: translate(-.5px, -.5px); transform: translate(-.5px, -.5px); } 60% { -webkit-transform: translate(.5px, .5px); transform: translate(.5px, .5px); } 80% { -webkit-transform: translate(.5px, -.5px); transform: translate(.5px, -.5px); } 100% { -webkit-transform: translate(0); transform: translate(0); } } @keyframes vibrate-1 { 0% { -webkit-transform: translate(0); transform: translate(0); } 20% { -webkit-transform: translate(-.5px, .5px); transform: translate(-.5px, .5px); } 40% { -webkit-transform: translate(-.5px, -.5px); transform: translate(-.5px, -.5px); } 60% { -webkit-transform: translate(.5px, .5px); transform: translate(.5px, .5px); } 80% { -webkit-transform: translate(.5px, -.5px); transform: translate(.5px, -.5px); } 100% { -webkit-transform: translate(0); transform: translate(0); } } .glow { font-size: 80px; color: #fff; text-align: center; -webkit-animation: glow 1s ease-in-out infinite alternate; -moz-animation: glow 1s ease-in-out infinite alternate; animation: glow 1s ease-in-out infinite alternate; } @-webkit-keyframes glow { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px var(--orange-2), 0 0 40px var(--orange-2), 0 0 50px var(--orange-2), 0 0 60px var(--orange-2), 0 0 70px var(--orange-2); } to { text-shadow: 0 0 20px #fff, 0 0 30px var(--orange-3), 0 0 40px var(--orange-3), 0 0 50px var(--orange-3), 0 0 60px var(--orange-3), 0 0 70px var(--orange-3), 0 0 80px var(--orange-3); } } @keyframes awaiting-confirmation { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(254, 166, 46, .7); } 70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(254, 166, 46, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(254, 166, 46, 0); } } @-webkit-keyframes slide-in-left-cta { 0% { -webkit-transform: translateX(-1000px); transform: translateX(-1000px); opacity: 0; } 100% { -webkit-transform: translateX(0) rotate(3deg); transform: translateX(0) rotate(3deg); opacity: 1; } } @keyframes slide-in-left-cta { 0% { -webkit-transform: translateX(-1000px); transform: translateX(-1000px); opacity: 0; } 100% { -webkit-transform: translateX(0) rotate(-3deg); transform: translateX(0) rotate(-3deg); opacity: 1; } } @-webkit-keyframes slide-in-right-cta { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes slide-in-right-cta { 0% { -webkit-transform: translateX(1000px); transform: translateX(1000px); opacity: 0; } 100% { -webkit-transform: translateX(0) rotate(3deg); transform: translateX(0) rotate(3deg); opacity: 1; } } @keyframes dropdown { from { opacity: 0; transform: scaleY(0); max-height: 0; } to { opacity: 1; transform: scaleY(1); max-height: 500px; } } .grow-from-bottom { animation: growFromBottom 2s ease-out forwards; } @keyframes growFromBottom { 0% { height: 0; } 100% { height: 100%; } } @-webkit-keyframes shake-top { 0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; } 10% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 20%, 40%, 60% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 30%, 50%, 70% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 80% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 90% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } } .slide-in-bottom { -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } @-webkit-keyframes slide-in-bottom { 0% { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes slide-in-bottom { 0% { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes appear { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }