/* 本文件由 build_anim_catalog.js 合并生成 — 以下为 9 个 MIT 开源库的真实源码 */ @charset "UTF-8";/*! * animate.css - https://animate.style/ * Version - 4.1.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2020 Animate.css */ :root { --animate-duration: 1s; --animate-delay: 1s; --animate-repeat: 1; } .animate__animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-duration: var(--animate-duration); animation-duration: var(--animate-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animate__animated.animate__infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animate__animated.animate__repeat-1 { -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-iteration-count: var(--animate-repeat); animation-iteration-count: var(--animate-repeat); } .animate__animated.animate__repeat-2 { -webkit-animation-iteration-count: calc(1 * 2); animation-iteration-count: calc(1 * 2); -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2); animation-iteration-count: calc(var(--animate-repeat) * 2); } .animate__animated.animate__repeat-3 { -webkit-animation-iteration-count: calc(1 * 3); animation-iteration-count: calc(1 * 3); -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3); animation-iteration-count: calc(var(--animate-repeat) * 3); } .animate__animated.animate__delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-delay: var(--animate-delay); animation-delay: var(--animate-delay); } .animate__animated.animate__delay-2s { -webkit-animation-delay: calc(1s * 2); animation-delay: calc(1s * 2); -webkit-animation-delay: calc(var(--animate-delay) * 2); animation-delay: calc(var(--animate-delay) * 2); } .animate__animated.animate__delay-3s { -webkit-animation-delay: calc(1s * 3); animation-delay: calc(1s * 3); -webkit-animation-delay: calc(var(--animate-delay) * 3); animation-delay: calc(var(--animate-delay) * 3); } .animate__animated.animate__delay-4s { -webkit-animation-delay: calc(1s * 4); animation-delay: calc(1s * 4); -webkit-animation-delay: calc(var(--animate-delay) * 4); animation-delay: calc(var(--animate-delay) * 4); } .animate__animated.animate__delay-5s { -webkit-animation-delay: calc(1s * 5); animation-delay: calc(1s * 5); -webkit-animation-delay: calc(var(--animate-delay) * 5); animation-delay: calc(var(--animate-delay) * 5); } .animate__animated.animate__faster { -webkit-animation-duration: calc(1s / 2); animation-duration: calc(1s / 2); -webkit-animation-duration: calc(var(--animate-duration) / 2); animation-duration: calc(var(--animate-duration) / 2); } .animate__animated.animate__fast { -webkit-animation-duration: calc(1s * 0.8); animation-duration: calc(1s * 0.8); -webkit-animation-duration: calc(var(--animate-duration) * 0.8); animation-duration: calc(var(--animate-duration) * 0.8); } .animate__animated.animate__slow { -webkit-animation-duration: calc(1s * 2); animation-duration: calc(1s * 2); -webkit-animation-duration: calc(var(--animate-duration) * 2); animation-duration: calc(var(--animate-duration) * 2); } .animate__animated.animate__slower { -webkit-animation-duration: calc(1s * 3); animation-duration: calc(1s * 3); -webkit-animation-duration: calc(var(--animate-duration) * 3); animation-duration: calc(var(--animate-duration) * 3); } @media print, (prefers-reduced-motion: reduce) { .animate__animated { -webkit-animation-duration: 1ms !important; animation-duration: 1ms !important; -webkit-transition-duration: 1ms !important; transition-duration: 1ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; } .animate__animated[class*='Out'] { opacity: 0; } } /* Attention seekers */ @-webkit-keyframes bounce { from, 20%, 53%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); transform: translate3d(0, -15px, 0) scaleY(1.05); } 80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0) scaleY(0.95); transform: translate3d(0, 0, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); transform: translate3d(0, -4px, 0) scaleY(1.02); } } @keyframes bounce { from, 20%, 53%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); transform: translate3d(0, -15px, 0) scaleY(1.05); } 80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0) scaleY(0.95); transform: translate3d(0, 0, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); transform: translate3d(0, -4px, 0) scaleY(1.02); } } .animate__bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .animate__flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .animate__pulse { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .animate__rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shakeX { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shakeX { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .animate__shakeX { -webkit-animation-name: shakeX; animation-name: shakeX; } @-webkit-keyframes shakeY { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } } @keyframes shakeY { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } } .animate__shakeY { -webkit-animation-name: shakeY; animation-name: shakeY; } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .animate__headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .animate__swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.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(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.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); } } .animate__tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .animate__jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } .animate__heartBeat { -webkit-animation-name: heartBeat; animation-name: heartBeat; -webkit-animation-duration: calc(1s * 1.3); animation-duration: calc(1s * 1.3); -webkit-animation-duration: calc(var(--animate-duration) * 1.3); animation-duration: calc(var(--animate-duration) * 1.3); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } /* Back entrances */ @-webkit-keyframes backInDown { 0% { -webkit-transform: translateY(-1200px) scale(0.7); transform: translateY(-1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInDown { 0% { -webkit-transform: translateY(-1200px) scale(0.7); transform: translateY(-1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInDown { -webkit-animation-name: backInDown; animation-name: backInDown; } @-webkit-keyframes backInLeft { 0% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInLeft { 0% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInLeft { -webkit-animation-name: backInLeft; animation-name: backInLeft; } @-webkit-keyframes backInRight { 0% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInRight { 0% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInRight { -webkit-animation-name: backInRight; animation-name: backInRight; } @-webkit-keyframes backInUp { 0% { -webkit-transform: translateY(1200px) scale(0.7); transform: translateY(1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInUp { 0% { -webkit-transform: translateY(1200px) scale(0.7); transform: translateY(1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInUp { -webkit-animation-name: backInUp; animation-name: backInUp; } /* Back exits */ @-webkit-keyframes backOutDown { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateY(700px) scale(0.7); transform: translateY(700px) scale(0.7); opacity: 0.7; } } @keyframes backOutDown { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateY(700px) scale(0.7); transform: translateY(700px) scale(0.7); opacity: 0.7; } } .animate__backOutDown { -webkit-animation-name: backOutDown; animation-name: backOutDown; } @-webkit-keyframes backOutLeft { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } } @keyframes backOutLeft { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } } .animate__backOutLeft { -webkit-animation-name: backOutLeft; animation-name: backOutLeft; } @-webkit-keyframes backOutRight { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } } @keyframes backOutRight { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } } .animate__backOutRight { -webkit-animation-name: backOutRight; animation-name: backOutRight; } @-webkit-keyframes backOutUp { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateY(-700px) scale(0.7); transform: translateY(-700px) scale(0.7); opacity: 0.7; } } @keyframes backOutUp { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateY(-700px) scale(0.7); transform: translateY(-700px) scale(0.7); opacity: 0.7; } } .animate__backOutUp { -webkit-animation-name: backOutUp; animation-name: backOutUp; } /* Bouncing entrances */ @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .animate__bounceIn { -webkit-animation-duration: calc(1s * 0.75); animation-duration: calc(1s * 0.75); -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); transform: translate3d(0, -3000px, 0) scaleY(3); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); transform: translate3d(0, 25px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); transform: translate3d(0, -10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); transform: translate3d(0, 5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); transform: translate3d(0, -3000px, 0) scaleY(3); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); transform: translate3d(0, 25px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); transform: translate3d(0, -10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); transform: translate3d(0, 5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); transform: translate3d(-3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0) scaleX(1); transform: translate3d(25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); transform: translate3d(-10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); transform: translate3d(5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); transform: translate3d(-3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0) scaleX(1); transform: translate3d(25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); transform: translate3d(-10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); transform: translate3d(5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); transform: translate3d(3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); transform: translate3d(-25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); transform: translate3d(10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); transform: translate3d(-5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); transform: translate3d(3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); transform: translate3d(-25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); transform: translate3d(10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); transform: translate3d(-5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); transform: translate3d(0, 10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); transform: translate3d(0, -5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); transform: translate3d(0, 10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); transform: translate3d(0, -5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } /* Bouncing exits */ @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .animate__bounceOut { -webkit-animation-duration: calc(1s * 0.75); animation-duration: calc(1s * 0.75); -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); transform: translate3d(0, 10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); transform: translate3d(0, 2000px, 0) scaleY(3); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); transform: translate3d(0, 10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); transform: translate3d(0, 2000px, 0) scaleY(3); } } .animate__bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); transform: translate3d(20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); transform: translate3d(-2000px, 0, 0) scaleX(2); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); transform: translate3d(20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); transform: translate3d(-2000px, 0, 0) scaleX(2); } } .animate__bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); transform: translate3d(-20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); transform: translate3d(2000px, 0, 0) scaleX(2); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); transform: translate3d(-20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); transform: translate3d(2000px, 0, 0) scaleX(2); } } .animate__bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); transform: translate3d(0, -10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); transform: translate3d(0, 20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); transform: translate3d(0, -2000px, 0) scaleY(3); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); transform: translate3d(0, -10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); transform: translate3d(0, 20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); transform: translate3d(0, -2000px, 0) scaleY(3); } } .animate__bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } /* Fading entrances */ @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate__fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeInTopLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInTopLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInTopLeft { -webkit-animation-name: fadeInTopLeft; animation-name: fadeInTopLeft; } @-webkit-keyframes fadeInTopRight { from { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInTopRight { from { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInTopRight { -webkit-animation-name: fadeInTopRight; animation-name: fadeInTopRight; } @-webkit-keyframes fadeInBottomLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInBottomLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInBottomLeft { -webkit-animation-name: fadeInBottomLeft; animation-name: fadeInBottomLeft; } @-webkit-keyframes fadeInBottomRight { from { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInBottomRight { from { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInBottomRight { -webkit-animation-name: fadeInBottomRight; animation-name: fadeInBottomRight; } /* Fading exits */ @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .animate__fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .animate__fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .animate__fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .animate__fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .animate__fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .animate__fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .animate__fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .animate__fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .animate__fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes fadeOutTopLeft { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } } @keyframes fadeOutTopLeft { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } } .animate__fadeOutTopLeft { -webkit-animation-name: fadeOutTopLeft; animation-name: fadeOutTopLeft; } @-webkit-keyframes fadeOutTopRight { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } } @keyframes fadeOutTopRight { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } } .animate__fadeOutTopRight { -webkit-animation-name: fadeOutTopRight; animation-name: fadeOutTopRight; } @-webkit-keyframes fadeOutBottomRight { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } } @keyframes fadeOutBottomRight { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } } .animate__fadeOutBottomRight { -webkit-animation-name: fadeOutBottomRight; animation-name: fadeOutBottomRight; } @-webkit-keyframes fadeOutBottomLeft { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } } @keyframes fadeOutBottomLeft { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } } .animate__fadeOutBottomLeft { -webkit-animation-name: fadeOutBottomLeft; animation-name: fadeOutBottomLeft; } /* Flippers */ @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animate__animated.animate__flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .animate__flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .animate__flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .animate__flipOutX { -webkit-animation-duration: calc(1s * 0.75); animation-duration: calc(1s * 0.75); -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .animate__flipOutY { -webkit-animation-duration: calc(1s * 0.75); animation-duration: calc(1s * 0.75); -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } /* Lightspeed */ @-webkit-keyframes lightSpeedInRight { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes lightSpeedInRight { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__lightSpeedInRight { -webkit-animation-name: lightSpeedInRight; animation-name: lightSpeedInRight; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedInLeft { from { -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; } 60% { -webkit-transform: skewX(-20deg); transform: skewX(-20deg); opacity: 1; } 80% { -webkit-transform: skewX(5deg); transform: skewX(5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes lightSpeedInLeft { from { -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; } 60% { -webkit-transform: skewX(-20deg); transform: skewX(-20deg); opacity: 1; } 80% { -webkit-transform: skewX(5deg); transform: skewX(5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__lightSpeedInLeft { -webkit-animation-name: lightSpeedInLeft; animation-name: lightSpeedInLeft; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOutRight { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOutRight { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .animate__lightSpeedOutRight { -webkit-animation-name: lightSpeedOutRight; animation-name: lightSpeedOutRight; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes lightSpeedOutLeft { from { opacity: 1; } to { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOutLeft { from { opacity: 1; } to { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0; } } .animate__lightSpeedOutLeft { -webkit-animation-name: lightSpeedOutLeft; animation-name: lightSpeedOutLeft; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } /* Rotating entrances */ @-webkit-keyframes rotateIn { from { -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateIn { from { -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .animate__rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInDownLeft { from { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .animate__rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateInDownRight { from { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInDownRight { from { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .animate__rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInUpLeft { from { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .animate__rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateInUpRight { from { -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInUpRight { from { -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .animate__rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } /* Rotating exits */ @-webkit-keyframes rotateOut { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .animate__rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes rotateOutDownLeft { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .animate__rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateOutDownRight { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .animate__rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } @-webkit-keyframes rotateOutUpLeft { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .animate__rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateOutUpRight { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .animate__rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } /* Specials */ @-webkit-keyframes hinge { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .animate__hinge { -webkit-animation-duration: calc(1s * 2); animation-duration: calc(1s * 2); -webkit-animation-duration: calc(var(--animate-duration) * 2); animation-duration: calc(var(--animate-duration) * 2); -webkit-animation-name: hinge; animation-name: hinge; -webkit-transform-origin: top left; transform-origin: top left; } @-webkit-keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .animate__jackInTheBox { -webkit-animation-name: jackInTheBox; animation-name: jackInTheBox; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .animate__rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } /* Zooming entrances */ @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .animate__zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } /* Zooming exits */ @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .animate__zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); } } .animate__zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; -webkit-transform-origin: left center; transform-origin: left center; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); } } .animate__zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; -webkit-transform-origin: right center; transform-origin: right center; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; -webkit-transform-origin: center bottom; transform-origin: center bottom; } /* Sliding entrances */ @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } /* Sliding exits */ @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .animate__slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .animate__slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .animate__slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .animate__slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } /*! * Hover.css (http://ianlunn.github.io/Hover/) * Version: 2.3.2 * Author: Ian Lunn @IanLunn * Author URL: http://ianlunn.co.uk/ * Github: https://github.com/IanLunn/Hover * Hover.css Copyright Ian Lunn 2017. Generated with Sass. */ /* 2D TRANSITIONS */ /* Grow */ .hvr-grow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active { -webkit-transform: scale(1.1); transform: scale(1.1); } /* Shrink */ .hvr-shrink { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active { -webkit-transform: scale(0.9); transform: scale(0.9); } /* Pulse */ @-webkit-keyframes hvr-pulse { 25% { -webkit-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes hvr-pulse { 25% { -webkit-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(0.9); transform: scale(0.9); } } .hvr-pulse { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active { -webkit-animation-name: hvr-pulse; animation-name: hvr-pulse; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* Pulse Grow */ @-webkit-keyframes hvr-pulse-grow { to { -webkit-transform: scale(1.1); transform: scale(1.1); } } @keyframes hvr-pulse-grow { to { -webkit-transform: scale(1.1); transform: scale(1.1); } } .hvr-pulse-grow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-pulse-grow:hover, .hvr-pulse-grow:focus, .hvr-pulse-grow:active { -webkit-animation-name: hvr-pulse-grow; animation-name: hvr-pulse-grow; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } /* Pulse Shrink */ @-webkit-keyframes hvr-pulse-shrink { to { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes hvr-pulse-shrink { to { -webkit-transform: scale(0.9); transform: scale(0.9); } } .hvr-pulse-shrink { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-pulse-shrink:hover, .hvr-pulse-shrink:focus, .hvr-pulse-shrink:active { -webkit-animation-name: hvr-pulse-shrink; animation-name: hvr-pulse-shrink; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } /* Push */ @-webkit-keyframes hvr-push { 50% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes hvr-push { 50% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .hvr-push { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-push:hover, .hvr-push:focus, .hvr-push:active { -webkit-animation-name: hvr-push; animation-name: hvr-push; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Pop */ @-webkit-keyframes hvr-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes hvr-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } .hvr-pop { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active { -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Bounce In */ .hvr-bounce-in { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active { -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); } /* Bounce Out */ .hvr-bounce-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .hvr-bounce-out:hover, .hvr-bounce-out:focus, .hvr-bounce-out:active { -webkit-transform: scale(0.8); transform: scale(0.8); -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); } /* Rotate */ .hvr-rotate { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-rotate:hover, .hvr-rotate:focus, .hvr-rotate:active { -webkit-transform: rotate(4deg); transform: rotate(4deg); } /* Grow Rotate */ .hvr-grow-rotate { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-grow-rotate:hover, .hvr-grow-rotate:focus, .hvr-grow-rotate:active { -webkit-transform: scale(1.1) rotate(4deg); transform: scale(1.1) rotate(4deg); } /* Float */ .hvr-float { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-float:hover, .hvr-float:focus, .hvr-float:active { -webkit-transform: translateY(-8px); transform: translateY(-8px); } /* Sink */ .hvr-sink { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sink:hover, .hvr-sink:focus, .hvr-sink:active { -webkit-transform: translateY(8px); transform: translateY(8px); } /* Bob */ @-webkit-keyframes hvr-bob { 0% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } 50% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @keyframes hvr-bob { 0% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } 50% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @-webkit-keyframes hvr-bob-float { 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @keyframes hvr-bob-float { 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } .hvr-bob { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active { -webkit-animation-name: hvr-bob-float, hvr-bob; animation-name: hvr-bob-float, hvr-bob; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate; } /* Hang */ @-webkit-keyframes hvr-hang { 0% { -webkit-transform: translateY(8px); transform: translateY(8px); } 50% { -webkit-transform: translateY(4px); transform: translateY(4px); } 100% { -webkit-transform: translateY(8px); transform: translateY(8px); } } @keyframes hvr-hang { 0% { -webkit-transform: translateY(8px); transform: translateY(8px); } 50% { -webkit-transform: translateY(4px); transform: translateY(4px); } 100% { -webkit-transform: translateY(8px); transform: translateY(8px); } } @-webkit-keyframes hvr-hang-sink { 100% { -webkit-transform: translateY(8px); transform: translateY(8px); } } @keyframes hvr-hang-sink { 100% { -webkit-transform: translateY(8px); transform: translateY(8px); } } .hvr-hang { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-hang:hover, .hvr-hang:focus, .hvr-hang:active { -webkit-animation-name: hvr-hang-sink, hvr-hang; animation-name: hvr-hang-sink, hvr-hang; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate; } /* Skew */ .hvr-skew { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-skew:hover, .hvr-skew:focus, .hvr-skew:active { -webkit-transform: skew(-10deg); transform: skew(-10deg); } /* Skew Forward */ .hvr-skew-forward { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .hvr-skew-forward:hover, .hvr-skew-forward:focus, .hvr-skew-forward:active { -webkit-transform: skew(-10deg); transform: skew(-10deg); } /* Skew Backward */ .hvr-skew-backward { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .hvr-skew-backward:hover, .hvr-skew-backward:focus, .hvr-skew-backward:active { -webkit-transform: skew(10deg); transform: skew(10deg); } /* Wobble Vertical */ @-webkit-keyframes hvr-wobble-vertical { 16.65% { -webkit-transform: translateY(8px); transform: translateY(8px); } 33.3% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes hvr-wobble-vertical { 16.65% { -webkit-transform: translateY(8px); transform: translateY(8px); } 33.3% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .hvr-wobble-vertical { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active { -webkit-animation-name: hvr-wobble-vertical; animation-name: hvr-wobble-vertical; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Wobble Horizontal */ @-webkit-keyframes hvr-wobble-horizontal { 16.65% { -webkit-transform: translateX(8px); transform: translateX(8px); } 33.3% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes hvr-wobble-horizontal { 16.65% { -webkit-transform: translateX(8px); transform: translateX(8px); } 33.3% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .hvr-wobble-horizontal { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active { -webkit-animation-name: hvr-wobble-horizontal; animation-name: hvr-wobble-horizontal; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Wobble To Bottom Right */ @-webkit-keyframes hvr-wobble-to-bottom-right { 16.65% { -webkit-transform: translate(8px, 8px); transform: translate(8px, 8px); } 33.3% { -webkit-transform: translate(-6px, -6px); transform: translate(-6px, -6px); } 49.95% { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); } 66.6% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } 83.25% { -webkit-transform: translate(1px, 1px); transform: translate(1px, 1px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes hvr-wobble-to-bottom-right { 16.65% { -webkit-transform: translate(8px, 8px); transform: translate(8px, 8px); } 33.3% { -webkit-transform: translate(-6px, -6px); transform: translate(-6px, -6px); } 49.95% { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); } 66.6% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } 83.25% { -webkit-transform: translate(1px, 1px); transform: translate(1px, 1px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } .hvr-wobble-to-bottom-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-wobble-to-bottom-right:hover, .hvr-wobble-to-bottom-right:focus, .hvr-wobble-to-bottom-right:active { -webkit-animation-name: hvr-wobble-to-bottom-right; animation-name: hvr-wobble-to-bottom-right; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Wobble To Top Right */ @-webkit-keyframes hvr-wobble-to-top-right { 16.65% { -webkit-transform: translate(8px, -8px); transform: translate(8px, -8px); } 33.3% { -webkit-transform: translate(-6px, 6px); transform: translate(-6px, 6px); } 49.95% { -webkit-transform: translate(4px, -4px); transform: translate(4px, -4px); } 66.6% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); } 83.25% { -webkit-transform: translate(1px, -1px); transform: translate(1px, -1px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes hvr-wobble-to-top-right { 16.65% { -webkit-transform: translate(8px, -8px); transform: translate(8px, -8px); } 33.3% { -webkit-transform: translate(-6px, 6px); transform: translate(-6px, 6px); } 49.95% { -webkit-transform: translate(4px, -4px); transform: translate(4px, -4px); } 66.6% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); } 83.25% { -webkit-transform: translate(1px, -1px); transform: translate(1px, -1px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } .hvr-wobble-to-top-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-wobble-to-top-right:hover, .hvr-wobble-to-top-right:focus, .hvr-wobble-to-top-right:active { -webkit-animation-name: hvr-wobble-to-top-right; animation-name: hvr-wobble-to-top-right; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Wobble Top */ @-webkit-keyframes hvr-wobble-top { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } @keyframes hvr-wobble-top { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } .hvr-wobble-top { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .hvr-wobble-top:hover, .hvr-wobble-top:focus, .hvr-wobble-top:active { -webkit-animation-name: hvr-wobble-top; animation-name: hvr-wobble-top; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Wobble Bottom */ @-webkit-keyframes hvr-wobble-bottom { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } @keyframes hvr-wobble-bottom { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } .hvr-wobble-bottom { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .hvr-wobble-bottom:hover, .hvr-wobble-bottom:focus, .hvr-wobble-bottom:active { -webkit-animation-name: hvr-wobble-bottom; animation-name: hvr-wobble-bottom; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Wobble Skew */ @-webkit-keyframes hvr-wobble-skew { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } @keyframes hvr-wobble-skew { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } .hvr-wobble-skew { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-wobble-skew:hover, .hvr-wobble-skew:focus, .hvr-wobble-skew:active { -webkit-animation-name: hvr-wobble-skew; animation-name: hvr-wobble-skew; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Buzz */ @-webkit-keyframes hvr-buzz { 50% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 100% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } } @keyframes hvr-buzz { 50% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 100% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } } .hvr-buzz { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-buzz:hover, .hvr-buzz:focus, .hvr-buzz:active { -webkit-animation-name: hvr-buzz; animation-name: hvr-buzz; -webkit-animation-duration: 0.15s; animation-duration: 0.15s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* Buzz Out */ @-webkit-keyframes hvr-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } @keyframes hvr-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } .hvr-buzz-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active { -webkit-animation-name: hvr-buzz-out; animation-name: hvr-buzz-out; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Forward */ .hvr-forward { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-forward:hover, .hvr-forward:focus, .hvr-forward:active { -webkit-transform: translateX(8px); transform: translateX(8px); } /* Backward */ .hvr-backward { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-backward:hover, .hvr-backward:focus, .hvr-backward:active { -webkit-transform: translateX(-8px); transform: translateX(-8px); } /* BACKGROUND TRANSITIONS */ /* Fade */ .hvr-fade { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); overflow: hidden; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: color, background-color; transition-property: color, background-color; } .hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active { background-color: #2098D1; color: white; } /* Back Pulse */ @-webkit-keyframes hvr-back-pulse { 50% { background-color: rgba(32, 152, 209, 0.75); } } @keyframes hvr-back-pulse { 50% { background-color: rgba(32, 152, 209, 0.75); } } .hvr-back-pulse { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); overflow: hidden; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-property: color, background-color; transition-property: color, background-color; } .hvr-back-pulse:hover, .hvr-back-pulse:focus, .hvr-back-pulse:active { -webkit-animation-name: hvr-back-pulse; animation-name: hvr-back-pulse; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background-color: #2098D1; background-color: #2098d1; color: white; } /* Sweep To Right */ .hvr-sweep-to-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active { color: white; } .hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } /* Sweep To Left */ .hvr-sweep-to-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-sweep-to-left:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sweep-to-left:hover, .hvr-sweep-to-left:focus, .hvr-sweep-to-left:active { color: white; } .hvr-sweep-to-left:hover:before, .hvr-sweep-to-left:focus:before, .hvr-sweep-to-left:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } /* Sweep To Bottom */ .hvr-sweep-to-bottom { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-sweep-to-bottom:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active { color: white; } .hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } /* Sweep To Top */ .hvr-sweep-to-top { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-sweep-to-top:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sweep-to-top:hover, .hvr-sweep-to-top:focus, .hvr-sweep-to-top:active { color: white; } .hvr-sweep-to-top:hover:before, .hvr-sweep-to-top:focus:before, .hvr-sweep-to-top:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } /* Bounce To Right */ .hvr-bounce-to-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .hvr-bounce-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active { color: white; } .hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* Bounce To Left */ .hvr-bounce-to-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .hvr-bounce-to-left:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-bounce-to-left:hover, .hvr-bounce-to-left:focus, .hvr-bounce-to-left:active { color: white; } .hvr-bounce-to-left:hover:before, .hvr-bounce-to-left:focus:before, .hvr-bounce-to-left:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* Bounce To Bottom */ .hvr-bounce-to-bottom { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .hvr-bounce-to-bottom:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-bounce-to-bottom:hover, .hvr-bounce-to-bottom:focus, .hvr-bounce-to-bottom:active { color: white; } .hvr-bounce-to-bottom:hover:before, .hvr-bounce-to-bottom:focus:before, .hvr-bounce-to-bottom:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* Bounce To Top */ .hvr-bounce-to-top { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .hvr-bounce-to-top:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-bounce-to-top:hover, .hvr-bounce-to-top:focus, .hvr-bounce-to-top:active { color: white; } .hvr-bounce-to-top:hover:before, .hvr-bounce-to-top:focus:before, .hvr-bounce-to-top:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* Radial Out */ .hvr-radial-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; background: #e1e1e1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-radial-out:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; border-radius: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-radial-out:hover, .hvr-radial-out:focus, .hvr-radial-out:active { color: white; } .hvr-radial-out:hover:before, .hvr-radial-out:focus:before, .hvr-radial-out:active:before { -webkit-transform: scale(2); transform: scale(2); } /* Radial In */ .hvr-radial-in { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; background: #2098D1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-radial-in:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #e1e1e1; border-radius: 100%; -webkit-transform: scale(2); transform: scale(2); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-radial-in:hover, .hvr-radial-in:focus, .hvr-radial-in:active { color: white; } .hvr-radial-in:hover:before, .hvr-radial-in:focus:before, .hvr-radial-in:active:before { -webkit-transform: scale(0); transform: scale(0); } /* Rectangle In */ .hvr-rectangle-in { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: #2098D1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-rectangle-in:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #e1e1e1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-rectangle-in:hover, .hvr-rectangle-in:focus, .hvr-rectangle-in:active { color: white; } .hvr-rectangle-in:hover:before, .hvr-rectangle-in:focus:before, .hvr-rectangle-in:active:before { -webkit-transform: scale(0); transform: scale(0); } /* Rectangle Out */ .hvr-rectangle-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: #e1e1e1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-rectangle-out:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-rectangle-out:hover, .hvr-rectangle-out:focus, .hvr-rectangle-out:active { color: white; } .hvr-rectangle-out:hover:before, .hvr-rectangle-out:focus:before, .hvr-rectangle-out:active:before { -webkit-transform: scale(1); transform: scale(1); } /* Shutter In Horizontal */ .hvr-shutter-in-horizontal { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: #2098D1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-shutter-in-horizontal:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #e1e1e1; -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-shutter-in-horizontal:hover, .hvr-shutter-in-horizontal:focus, .hvr-shutter-in-horizontal:active { color: white; } .hvr-shutter-in-horizontal:hover:before, .hvr-shutter-in-horizontal:focus:before, .hvr-shutter-in-horizontal:active:before { -webkit-transform: scaleX(0); transform: scaleX(0); } /* Shutter Out Horizontal */ .hvr-shutter-out-horizontal { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: #e1e1e1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-shutter-out-horizontal:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #2098D1; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus, .hvr-shutter-out-horizontal:active { color: white; } .hvr-shutter-out-horizontal:hover:before, .hvr-shutter-out-horizontal:focus:before, .hvr-shutter-out-horizontal:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } /* Shutter In Vertical */ .hvr-shutter-in-vertical { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: #2098D1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-shutter-in-vertical:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #e1e1e1; -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-shutter-in-vertical:hover, .hvr-shutter-in-vertical:focus, .hvr-shutter-in-vertical:active { color: white; } .hvr-shutter-in-vertical:hover:before, .hvr-shutter-in-vertical:focus:before, .hvr-shutter-in-vertical:active:before { -webkit-transform: scaleY(0); transform: scaleY(0); } /* Shutter Out Vertical */ .hvr-shutter-out-vertical { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: #e1e1e1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-shutter-out-vertical:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #2098D1; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-shutter-out-vertical:hover, .hvr-shutter-out-vertical:focus, .hvr-shutter-out-vertical:active { color: white; } .hvr-shutter-out-vertical:hover:before, .hvr-shutter-out-vertical:focus:before, .hvr-shutter-out-vertical:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } /* BORDER TRANSITIONS */ /* Border Fade */ .hvr-border-fade { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow; box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } .hvr-border-fade:hover, .hvr-border-fade:focus, .hvr-border-fade:active { box-shadow: inset 0 0 0 4px #2098D1, 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } /* Hollow */ .hvr-hollow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: background; transition-property: background; box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } .hvr-hollow:hover, .hvr-hollow:focus, .hvr-hollow:active { background: none; } /* Trim */ .hvr-trim { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-trim:before { content: ''; position: absolute; border: white solid 4px; top: 4px; left: 4px; right: 4px; bottom: 4px; opacity: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: opacity; transition-property: opacity; } .hvr-trim:hover:before, .hvr-trim:focus:before, .hvr-trim:active:before { opacity: 1; } /* Ripple Out */ @-webkit-keyframes hvr-ripple-out { 100% { top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0; } } @keyframes hvr-ripple-out { 100% { top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0; } } .hvr-ripple-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-ripple-out:before { content: ''; position: absolute; border: #e1e1e1 solid 6px; top: 0; right: 0; bottom: 0; left: 0; -webkit-animation-duration: 1s; animation-duration: 1s; } .hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before { -webkit-animation-name: hvr-ripple-out; animation-name: hvr-ripple-out; } /* Ripple In */ @-webkit-keyframes hvr-ripple-in { 100% { top: 0; right: 0; bottom: 0; left: 0; opacity: 1; } } @keyframes hvr-ripple-in { 100% { top: 0; right: 0; bottom: 0; left: 0; opacity: 1; } } .hvr-ripple-in { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-ripple-in:before { content: ''; position: absolute; border: #e1e1e1 solid 4px; top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0; -webkit-animation-duration: 1s; animation-duration: 1s; } .hvr-ripple-in:hover:before, .hvr-ripple-in:focus:before, .hvr-ripple-in:active:before { -webkit-animation-name: hvr-ripple-in; animation-name: hvr-ripple-in; } /* Outline Out */ .hvr-outline-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-outline-out:before { content: ''; position: absolute; border: #e1e1e1 solid 4px; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: top, right, bottom, left; transition-property: top, right, bottom, left; } .hvr-outline-out:hover:before, .hvr-outline-out:focus:before, .hvr-outline-out:active:before { top: -8px; right: -8px; bottom: -8px; left: -8px; } /* Outline In */ .hvr-outline-in { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-outline-in:before { pointer-events: none; content: ''; position: absolute; border: #e1e1e1 solid 4px; top: -16px; right: -16px; bottom: -16px; left: -16px; opacity: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: top, right, bottom, left; transition-property: top, right, bottom, left; } .hvr-outline-in:hover:before, .hvr-outline-in:focus:before, .hvr-outline-in:active:before { top: -8px; right: -8px; bottom: -8px; left: -8px; opacity: 1; } /* Round Corners */ .hvr-round-corners { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: border-radius; transition-property: border-radius; } .hvr-round-corners:hover, .hvr-round-corners:focus, .hvr-round-corners:active { border-radius: 1em; } /* Underline From Left */ .hvr-underline-from-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .hvr-underline-from-left:before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; bottom: 0; background: #2098D1; height: 4px; -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before { right: 0; } /* Underline From Center */ .hvr-underline-from-center { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .hvr-underline-from-center:before { content: ""; position: absolute; z-index: -1; left: 51%; right: 51%; bottom: 0; background: #2098D1; height: 4px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before { left: 0; right: 0; } /* Underline From Right */ .hvr-underline-from-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .hvr-underline-from-right:before { content: ""; position: absolute; z-index: -1; left: 100%; right: 0; bottom: 0; background: #2098D1; height: 4px; -webkit-transition-property: left; transition-property: left; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-underline-from-right:hover:before, .hvr-underline-from-right:focus:before, .hvr-underline-from-right:active:before { left: 0; } /* Overline From Left */ .hvr-overline-from-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .hvr-overline-from-left:before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; top: 0; background: #2098D1; height: 4px; -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-overline-from-left:hover:before, .hvr-overline-from-left:focus:before, .hvr-overline-from-left:active:before { right: 0; } /* Overline From Center */ .hvr-overline-from-center { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .hvr-overline-from-center:before { content: ""; position: absolute; z-index: -1; left: 51%; right: 51%; top: 0; background: #2098D1; height: 4px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-overline-from-center:hover:before, .hvr-overline-from-center:focus:before, .hvr-overline-from-center:active:before { left: 0; right: 0; } /* Overline From Right */ .hvr-overline-from-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .hvr-overline-from-right:before { content: ""; position: absolute; z-index: -1; left: 100%; right: 0; top: 0; background: #2098D1; height: 4px; -webkit-transition-property: left; transition-property: left; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-overline-from-right:hover:before, .hvr-overline-from-right:focus:before, .hvr-overline-from-right:active:before { left: 0; } /* Reveal */ .hvr-reveal { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .hvr-reveal:before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; border-color: #2098D1; border-style: solid; border-width: 0; -webkit-transition-property: border-width; transition-property: border-width; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-reveal:hover:before, .hvr-reveal:focus:before, .hvr-reveal:active:before { -webkit-transform: translateY(0); transform: translateY(0); border-width: 4px; } /* Underline Reveal */ .hvr-underline-reveal { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .hvr-underline-reveal:before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; background: #2098D1; height: 4px; -webkit-transform: translateY(4px); transform: translateY(4px); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-underline-reveal:hover:before, .hvr-underline-reveal:focus:before, .hvr-underline-reveal:active:before { -webkit-transform: translateY(0); transform: translateY(0); } /* Overline Reveal */ .hvr-overline-reveal { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .hvr-overline-reveal:before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; background: #2098D1; height: 4px; -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-overline-reveal:hover:before, .hvr-overline-reveal:focus:before, .hvr-overline-reveal:active:before { -webkit-transform: translateY(0); transform: translateY(0); } /* SHADOW/GLOW TRANSITIONS */ /* Glow */ .hvr-glow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow; } .hvr-glow:hover, .hvr-glow:focus, .hvr-glow:active { box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); } /* Shadow */ .hvr-shadow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow; } .hvr-shadow:hover, .hvr-shadow:focus, .hvr-shadow:active { box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); } /* Grow Shadow */ .hvr-grow-shadow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow, transform; transition-property: box-shadow, transform; } .hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active { box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); -webkit-transform: scale(1.1); transform: scale(1.1); } /* Box Shadow Outset */ .hvr-box-shadow-outset { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow; } .hvr-box-shadow-outset:hover, .hvr-box-shadow-outset:focus, .hvr-box-shadow-outset:active { box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); } /* Box Shadow Inset */ .hvr-box-shadow-inset { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow; box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } .hvr-box-shadow-inset:hover, .hvr-box-shadow-inset:focus, .hvr-box-shadow-inset:active { box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } /* Float Shadow */ .hvr-float-shadow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-float-shadow:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); /* W3C */ -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity; } .hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active { -webkit-transform: translateY(-5px); transform: translateY(-5px); /* move the element up by 5px */ } .hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before { opacity: 1; -webkit-transform: translateY(5px); transform: translateY(5px); /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */ } /* Shadow Radial */ .hvr-shadow-radial { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-shadow-radial:before, .hvr-shadow-radial:after { pointer-events: none; position: absolute; content: ''; left: 0; width: 100%; box-sizing: border-box; background-repeat: no-repeat; height: 5px; opacity: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: opacity; transition-property: opacity; } .hvr-shadow-radial:before { bottom: 100%; background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); } .hvr-shadow-radial:after { top: 100%; background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); } .hvr-shadow-radial:hover:before, .hvr-shadow-radial:focus:before, .hvr-shadow-radial:active:before, .hvr-shadow-radial:hover:after, .hvr-shadow-radial:focus:after, .hvr-shadow-radial:active:after { opacity: 1; } /* SPEECH BUBBLES */ /* Bubble Top */ .hvr-bubble-top { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-bubble-top:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; left: calc(50% - 10px); top: 0; border-width: 0 10px 10px 10px; border-color: transparent transparent #e1e1e1 transparent; } .hvr-bubble-top:hover:before, .hvr-bubble-top:focus:before, .hvr-bubble-top:active:before { -webkit-transform: translateY(-10px); transform: translateY(-10px); } /* Bubble Right */ .hvr-bubble-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-bubble-right:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; top: calc(50% - 10px); right: 0; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #e1e1e1; } .hvr-bubble-right:hover:before, .hvr-bubble-right:focus:before, .hvr-bubble-right:active:before { -webkit-transform: translateX(10px); transform: translateX(10px); } /* Bubble Bottom */ .hvr-bubble-bottom { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-bubble-bottom:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; left: calc(50% - 10px); bottom: 0; border-width: 10px 10px 0 10px; border-color: #e1e1e1 transparent transparent transparent; } .hvr-bubble-bottom:hover:before, .hvr-bubble-bottom:focus:before, .hvr-bubble-bottom:active:before { -webkit-transform: translateY(10px); transform: translateY(10px); } /* Bubble Left */ .hvr-bubble-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-bubble-left:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; top: calc(50% - 10px); left: 0; border-width: 10px 10px 10px 0; border-color: transparent #e1e1e1 transparent transparent; } .hvr-bubble-left:hover:before, .hvr-bubble-left:focus:before, .hvr-bubble-left:active:before { -webkit-transform: translateX(-10px); transform: translateX(-10px); } /* Bubble Float Top */ .hvr-bubble-float-top { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-top:before { position: absolute; z-index: -1; content: ''; left: calc(50% - 10px); top: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #e1e1e1 transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-top:hover, .hvr-bubble-float-top:focus, .hvr-bubble-float-top:active { -webkit-transform: translateY(10px); transform: translateY(10px); } .hvr-bubble-float-top:hover:before, .hvr-bubble-float-top:focus:before, .hvr-bubble-float-top:active:before { -webkit-transform: translateY(-10px); transform: translateY(-10px); } /* Bubble Float Right */ .hvr-bubble-float-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-right:before { position: absolute; z-index: -1; top: calc(50% - 10px); right: 0; content: ''; border-style: solid; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #e1e1e1; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-right:hover, .hvr-bubble-float-right:focus, .hvr-bubble-float-right:active { -webkit-transform: translateX(-10px); transform: translateX(-10px); } .hvr-bubble-float-right:hover:before, .hvr-bubble-float-right:focus:before, .hvr-bubble-float-right:active:before { -webkit-transform: translateX(10px); transform: translateX(10px); } /* Bubble Float Bottom */ .hvr-bubble-float-bottom { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-bottom:before { position: absolute; z-index: -1; content: ''; left: calc(50% - 10px); bottom: 0; border-style: solid; border-width: 10px 10px 0 10px; border-color: #e1e1e1 transparent transparent transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-bottom:hover, .hvr-bubble-float-bottom:focus, .hvr-bubble-float-bottom:active { -webkit-transform: translateY(-10px); transform: translateY(-10px); } .hvr-bubble-float-bottom:hover:before, .hvr-bubble-float-bottom:focus:before, .hvr-bubble-float-bottom:active:before { -webkit-transform: translateY(10px); transform: translateY(10px); } /* Bubble Float Left */ .hvr-bubble-float-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-left:before { position: absolute; z-index: -1; content: ''; top: calc(50% - 10px); left: 0; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #e1e1e1 transparent transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-left:hover, .hvr-bubble-float-left:focus, .hvr-bubble-float-left:active { -webkit-transform: translateX(10px); transform: translateX(10px); } .hvr-bubble-float-left:hover:before, .hvr-bubble-float-left:focus:before, .hvr-bubble-float-left:active:before { -webkit-transform: translateX(-10px); transform: translateX(-10px); } /* ICONS */ /* Icon Back */ .hvr-icon-back { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.1s; transition-duration: 0.1s; } .hvr-icon-back .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-back:hover .hvr-icon, .hvr-icon-back:focus .hvr-icon, .hvr-icon-back:active .hvr-icon { -webkit-transform: translateX(-4px); transform: translateX(-4px); } /* Icon Forward */ .hvr-icon-forward { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.1s; transition-duration: 0.1s; } .hvr-icon-forward .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-forward:hover .hvr-icon, .hvr-icon-forward:focus .hvr-icon, .hvr-icon-forward:active .hvr-icon { -webkit-transform: translateX(4px); transform: translateX(4px); } /* Icon Down */ @-webkit-keyframes hvr-icon-down { 0%, 50%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 25%, 75% { -webkit-transform: translateY(6px); transform: translateY(6px); } } @keyframes hvr-icon-down { 0%, 50%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 25%, 75% { -webkit-transform: translateY(6px); transform: translateY(6px); } } /* Icon Down */ .hvr-icon-down { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-icon-down .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-down:hover .hvr-icon, .hvr-icon-down:focus .hvr-icon, .hvr-icon-down:active .hvr-icon { -webkit-animation-name: hvr-icon-down; animation-name: hvr-icon-down; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } /* Icon Up */ @-webkit-keyframes hvr-icon-up { 0%, 50%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 25%, 75% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } @keyframes hvr-icon-up { 0%, 50%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 25%, 75% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } /* Icon Up */ .hvr-icon-up { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-icon-up .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-up:hover .hvr-icon, .hvr-icon-up:focus .hvr-icon, .hvr-icon-up:active .hvr-icon { -webkit-animation-name: hvr-icon-up; animation-name: hvr-icon-up; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } /* Icon Spin */ .hvr-icon-spin { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-icon-spin .hvr-icon { -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .hvr-icon-spin:hover .hvr-icon, .hvr-icon-spin:focus .hvr-icon, .hvr-icon-spin:active .hvr-icon { -webkit-transform: rotate(360deg); transform: rotate(360deg); } /* Icon Drop */ @-webkit-keyframes hvr-icon-drop { 0% { opacity: 0; } 50% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 51%, 100% { opacity: 1; } } @keyframes hvr-icon-drop { 0% { opacity: 0; } 50% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 51%, 100% { opacity: 1; } } /* Icon Drop */ .hvr-icon-drop { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-icon-drop .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-drop:hover .hvr-icon, .hvr-icon-drop:focus .hvr-icon, .hvr-icon-drop:active .hvr-icon { opacity: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-animation-name: hvr-icon-drop; animation-name: hvr-icon-drop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* Icon Fade */ .hvr-icon-fade { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-icon-fade .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-property: color; transition-property: color; } .hvr-icon-fade:hover .hvr-icon, .hvr-icon-fade:focus .hvr-icon, .hvr-icon-fade:active .hvr-icon { color: #0F9E5E; } /* Icon Float Away */ @-webkit-keyframes hvr-icon-float-away { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(-1em); transform: translateY(-1em); } } @keyframes hvr-icon-float-away { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(-1em); transform: translateY(-1em); } } /* Icon Float Away */ .hvr-icon-float-away { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-icon-float-away .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .hvr-icon-float-away:hover .hvr-icon, .hvr-icon-float-away:focus .hvr-icon, .hvr-icon-float-away:active .hvr-icon { -webkit-animation-name: hvr-icon-float-away; animation-name: hvr-icon-float-away; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } /* Icon Sink Away */ @-webkit-keyframes hvr-icon-sink-away { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(1em); transform: translateY(1em); } } @keyframes hvr-icon-sink-away { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(1em); transform: translateY(1em); } } /* Icon Sink Away */ .hvr-icon-sink-away { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-icon-sink-away .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .hvr-icon-sink-away:hover .hvr-icon, .hvr-icon-sink-away:focus .hvr-icon, .hvr-icon-sink-away:active .hvr-icon { -webkit-animation-name: hvr-icon-sink-away; animation-name: hvr-icon-sink-away; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } /* Icon Grow */ .hvr-icon-grow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-grow .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-grow:hover .hvr-icon, .hvr-icon-grow:focus .hvr-icon, .hvr-icon-grow:active .hvr-icon { -webkit-transform: scale(1.3) translateZ(0); transform: scale(1.3) translateZ(0); } /* Icon Shrink */ .hvr-icon-shrink { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-shrink .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-shrink:hover .hvr-icon, .hvr-icon-shrink:focus .hvr-icon, .hvr-icon-shrink:active .hvr-icon { -webkit-transform: scale(0.8); transform: scale(0.8); } /* Icon Pulse */ @-webkit-keyframes hvr-icon-pulse { 25% { -webkit-transform: scale(1.3); transform: scale(1.3); } 75% { -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes hvr-icon-pulse { 25% { -webkit-transform: scale(1.3); transform: scale(1.3); } 75% { -webkit-transform: scale(0.8); transform: scale(0.8); } } .hvr-icon-pulse { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-icon-pulse .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-pulse:hover .hvr-icon, .hvr-icon-pulse:focus .hvr-icon, .hvr-icon-pulse:active .hvr-icon { -webkit-animation-name: hvr-icon-pulse; animation-name: hvr-icon-pulse; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* Icon Pulse Grow */ @-webkit-keyframes hvr-icon-pulse-grow { to { -webkit-transform: scale(1.3); transform: scale(1.3); } } @keyframes hvr-icon-pulse-grow { to { -webkit-transform: scale(1.3); transform: scale(1.3); } } .hvr-icon-pulse-grow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-icon-pulse-grow .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-pulse-grow:hover .hvr-icon, .hvr-icon-pulse-grow:focus .hvr-icon, .hvr-icon-pulse-grow:active .hvr-icon { -webkit-animation-name: hvr-icon-pulse-grow; animation-name: hvr-icon-pulse-grow; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } /* Icon Pulse Shrink */ @-webkit-keyframes hvr-icon-pulse-shrink { to { -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes hvr-icon-pulse-shrink { to { -webkit-transform: scale(0.8); transform: scale(0.8); } } .hvr-icon-pulse-shrink { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-icon-pulse-shrink .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-pulse-shrink:hover .hvr-icon, .hvr-icon-pulse-shrink:focus .hvr-icon, .hvr-icon-pulse-shrink:active .hvr-icon { -webkit-animation-name: hvr-icon-pulse-shrink; animation-name: hvr-icon-pulse-shrink; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } /* Icon Push */ @-webkit-keyframes hvr-icon-push { 50% { -webkit-transform: scale(0.5); transform: scale(0.5); } } @keyframes hvr-icon-push { 50% { -webkit-transform: scale(0.5); transform: scale(0.5); } } .hvr-icon-push { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-push .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-push:hover .hvr-icon, .hvr-icon-push:focus .hvr-icon, .hvr-icon-push:active .hvr-icon { -webkit-animation-name: hvr-icon-push; animation-name: hvr-icon-push; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Icon Pop */ @-webkit-keyframes hvr-icon-pop { 50% { -webkit-transform: scale(1.5); transform: scale(1.5); } } @keyframes hvr-icon-pop { 50% { -webkit-transform: scale(1.5); transform: scale(1.5); } } .hvr-icon-pop { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-pop .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-pop:hover .hvr-icon, .hvr-icon-pop:focus .hvr-icon, .hvr-icon-pop:active .hvr-icon { -webkit-animation-name: hvr-icon-pop; animation-name: hvr-icon-pop; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Icon Bounce */ .hvr-icon-bounce { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-bounce .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-bounce:hover .hvr-icon, .hvr-icon-bounce:focus .hvr-icon, .hvr-icon-bounce:active .hvr-icon { -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); } /* Icon Rotate */ .hvr-icon-rotate { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-rotate .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-rotate:hover .hvr-icon, .hvr-icon-rotate:focus .hvr-icon, .hvr-icon-rotate:active .hvr-icon { -webkit-transform: rotate(20deg); transform: rotate(20deg); } /* Icon Grow Rotate */ .hvr-icon-grow-rotate { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-grow-rotate .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-grow-rotate:hover .hvr-icon, .hvr-icon-grow-rotate:focus .hvr-icon, .hvr-icon-grow-rotate:active .hvr-icon { -webkit-transform: scale(1.5) rotate(12deg); transform: scale(1.5) rotate(12deg); } /* Icon Float */ .hvr-icon-float { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-float .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-float:hover .hvr-icon, .hvr-icon-float:focus .hvr-icon, .hvr-icon-float:active .hvr-icon { -webkit-transform: translateY(-4px); transform: translateY(-4px); } /* Icon Sink */ .hvr-icon-sink { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-sink .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-sink:hover .hvr-icon, .hvr-icon-sink:focus .hvr-icon, .hvr-icon-sink:active .hvr-icon { -webkit-transform: translateY(4px); transform: translateY(4px); } /* Icon Bob */ @-webkit-keyframes hvr-icon-bob { 0% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 50% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } @keyframes hvr-icon-bob { 0% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 50% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } @-webkit-keyframes hvr-icon-bob-float { 100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } @keyframes hvr-icon-bob-float { 100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } .hvr-icon-bob { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-bob .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-bob:hover .hvr-icon, .hvr-icon-bob:focus .hvr-icon, .hvr-icon-bob:active .hvr-icon { -webkit-animation-name: hvr-icon-bob-float, hvr-icon-bob; animation-name: hvr-icon-bob-float, hvr-icon-bob; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate; } /* Icon Hang */ @-webkit-keyframes hvr-icon-hang { 0% { -webkit-transform: translateY(6px); transform: translateY(6px); } 50% { -webkit-transform: translateY(2px); transform: translateY(2px); } 100% { -webkit-transform: translateY(6px); transform: translateY(6px); } } @keyframes hvr-icon-hang { 0% { -webkit-transform: translateY(6px); transform: translateY(6px); } 50% { -webkit-transform: translateY(2px); transform: translateY(2px); } 100% { -webkit-transform: translateY(6px); transform: translateY(6px); } } @-webkit-keyframes hvr-icon-hang-sink { 100% { -webkit-transform: translateY(6px); transform: translateY(6px); } } @keyframes hvr-icon-hang-sink { 100% { -webkit-transform: translateY(6px); transform: translateY(6px); } } .hvr-icon-hang { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-hang .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-hang:hover .hvr-icon, .hvr-icon-hang:focus .hvr-icon, .hvr-icon-hang:active .hvr-icon { -webkit-animation-name: hvr-icon-hang-sink, hvr-icon-hang; animation-name: hvr-icon-hang-sink, hvr-icon-hang; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate; } /* Icon Wobble Horizontal */ @-webkit-keyframes hvr-icon-wobble-horizontal { 16.65% { -webkit-transform: translateX(6px); transform: translateX(6px); } 33.3% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes hvr-icon-wobble-horizontal { 16.65% { -webkit-transform: translateX(6px); transform: translateX(6px); } 33.3% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .hvr-icon-wobble-horizontal { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-wobble-horizontal .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-wobble-horizontal:hover .hvr-icon, .hvr-icon-wobble-horizontal:focus .hvr-icon, .hvr-icon-wobble-horizontal:active .hvr-icon { -webkit-animation-name: hvr-icon-wobble-horizontal; animation-name: hvr-icon-wobble-horizontal; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Icon Wobble Vertical */ @-webkit-keyframes hvr-icon-wobble-vertical { 16.65% { -webkit-transform: translateY(6px); transform: translateY(6px); } 33.3% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes hvr-icon-wobble-vertical { 16.65% { -webkit-transform: translateY(6px); transform: translateY(6px); } 33.3% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .hvr-icon-wobble-vertical { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-wobble-vertical .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-wobble-vertical:hover .hvr-icon, .hvr-icon-wobble-vertical:focus .hvr-icon, .hvr-icon-wobble-vertical:active .hvr-icon { -webkit-animation-name: hvr-icon-wobble-vertical; animation-name: hvr-icon-wobble-vertical; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Icon Buzz */ @-webkit-keyframes hvr-icon-buzz { 50% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 100% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } } @keyframes hvr-icon-buzz { 50% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 100% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } } .hvr-icon-buzz { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-buzz .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-buzz:hover .hvr-icon, .hvr-icon-buzz:focus .hvr-icon, .hvr-icon-buzz:active .hvr-icon { -webkit-animation-name: hvr-icon-buzz; animation-name: hvr-icon-buzz; -webkit-animation-duration: 0.15s; animation-duration: 0.15s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* Icon Buzz Out */ @-webkit-keyframes hvr-icon-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } @keyframes hvr-icon-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } .hvr-icon-buzz-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-buzz-out .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-buzz-out:hover .hvr-icon, .hvr-icon-buzz-out:focus .hvr-icon, .hvr-icon-buzz-out:active .hvr-icon { -webkit-animation-name: hvr-icon-buzz-out; animation-name: hvr-icon-buzz-out; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* CURLS */ /* Curl Top Left */ .hvr-curl-top-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-curl-top-left:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; top: 0; left: 0; background: white; /* IE9 */ background: linear-gradient(135deg, white 45%, #aaa 50%, #ccc 56%, white 80%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000'); /*For IE7-8-9*/ z-index: 1000; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: width, height; transition-property: width, height; } .hvr-curl-top-left:hover:before, .hvr-curl-top-left:focus:before, .hvr-curl-top-left:active:before { width: 25px; height: 25px; } /* Curl Top Right */ .hvr-curl-top-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-curl-top-right:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; top: 0; right: 0; background: white; /* IE9 */ background: linear-gradient(225deg, white 45%, #aaa 50%, #ccc 56%, white 80%); box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: width, height; transition-property: width, height; } .hvr-curl-top-right:hover:before, .hvr-curl-top-right:focus:before, .hvr-curl-top-right:active:before { width: 25px; height: 25px; } /* Curl Bottom Right */ .hvr-curl-bottom-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-curl-bottom-right:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; bottom: 0; right: 0; background: white; /* IE9 */ background: linear-gradient(315deg, white 45%, #aaa 50%, #ccc 56%, white 80%); box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: width, height; transition-property: width, height; } .hvr-curl-bottom-right:hover:before, .hvr-curl-bottom-right:focus:before, .hvr-curl-bottom-right:active:before { width: 25px; height: 25px; } /* Curl Bottom Left */ .hvr-curl-bottom-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-curl-bottom-left:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; bottom: 0; left: 0; background: white; /* IE9 */ background: linear-gradient(45deg, white 45%, #aaa 50%, #ccc 56%, white 80%); box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: width, height; transition-property: width, height; } .hvr-curl-bottom-left:hover:before, .hvr-curl-bottom-left:focus:before, .hvr-curl-bottom-left:active:before { width: 25px; height: 25px; } /*# sourceMappingURL=hover.css.map */ /*! * Magic - https://www.minimamente.com * Licensed under the MIT license - https://opensource.org/licenses/MIT * Copyright (c) 2020 Christian Pucci */ .puffIn { -webkit-animation-name: puffIn; animation-name: puffIn; } @-webkit-keyframes puffIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); filter: blur(2px); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); filter: blur(0px); } } @keyframes puffIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); filter: blur(2px); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); filter: blur(0px); } } .puffOut { -webkit-animation-name: puffOut; animation-name: puffOut; } @-webkit-keyframes puffOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); filter: blur(0px); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); filter: blur(2px); } } @keyframes puffOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); filter: blur(0px); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); filter: blur(2px); } } .vanishIn { -webkit-animation-name: vanishIn; animation-name: vanishIn; } @-webkit-keyframes vanishIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); filter: blur(90px); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); filter: blur(0px); } } @keyframes vanishIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); filter: blur(90px); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); filter: blur(0px); } } .vanishOut { -webkit-animation-name: vanishOut; animation-name: vanishOut; } @-webkit-keyframes vanishOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); filter: blur(0px); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); filter: blur(20px); } } @keyframes vanishOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); filter: blur(0px); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); filter: blur(20px); } } .boingInUp { -webkit-animation-name: boingInUp; animation-name: boingInUp; } @-webkit-keyframes boingInUp { 0% { opacity: 0; transform-origin: 50% 0%; transform: perspective(800px) rotateX(-90deg); } 50% { opacity: 1; transform-origin: 50% 0%; transform: perspective(800px) rotateX(50deg); } 100% { opacity: 1; transform-origin: 50% 0%; transform: perspective(800px) rotateX(0deg); } } @keyframes boingInUp { 0% { opacity: 0; transform-origin: 50% 0%; transform: perspective(800px) rotateX(-90deg); } 50% { opacity: 1; transform-origin: 50% 0%; transform: perspective(800px) rotateX(50deg); } 100% { opacity: 1; transform-origin: 50% 0%; transform: perspective(800px) rotateX(0deg); } } .boingOutDown { -webkit-animation-name: boingOutDown; animation-name: boingOutDown; } @-webkit-keyframes boingOutDown { 0% { opacity: 1; transform-origin: 100% 100%; transform: perspective(800px) rotateX(0deg) rotateY(0deg); } 20% { opacity: 1; transform-origin: 100% 100%; transform: perspective(800px) rotateX(0deg) rotateY(10deg); } 30% { opacity: 1; transform-origin: 0% 100%; transform: perspective(800px) rotateX(0deg) rotateY(0deg); } 40% { opacity: 1; transform-origin: 0% 100%; transform: perspective(800px) rotateX(10deg) rotateY(10deg); } 100% { opacity: 0; transform-origin: 100% 100%; transform: perspective(800px) rotateX(90deg) rotateY(0deg); } } @keyframes boingOutDown { 0% { opacity: 1; transform-origin: 100% 100%; transform: perspective(800px) rotateX(0deg) rotateY(0deg); } 20% { opacity: 1; transform-origin: 100% 100%; transform: perspective(800px) rotateX(0deg) rotateY(10deg); } 30% { opacity: 1; transform-origin: 0% 100%; transform: perspective(800px) rotateX(0deg) rotateY(0deg); } 40% { opacity: 1; transform-origin: 0% 100%; transform: perspective(800px) rotateX(10deg) rotateY(10deg); } 100% { opacity: 0; transform-origin: 100% 100%; transform: perspective(800px) rotateX(90deg) rotateY(0deg); } } .bombLeftOut { -webkit-animation-name: bombLeftOut; animation-name: bombLeftOut; } @-webkit-keyframes bombLeftOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: rotate(0deg); filter: blur(0px); } 50% { opacity: 1; transform-origin: -100% 50%; transform: rotate(-160deg); filter: blur(0px); } 100% { opacity: 0; transform-origin: -100% 50%; transform: rotate(-160deg); filter: blur(20px); } } @keyframes bombLeftOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: rotate(0deg); filter: blur(0px); } 50% { opacity: 1; transform-origin: -100% 50%; transform: rotate(-160deg); filter: blur(0px); } 100% { opacity: 0; transform-origin: -100% 50%; transform: rotate(-160deg); filter: blur(20px); } } .bombRightOut { -webkit-animation-name: bombRightOut; animation-name: bombRightOut; } @-webkit-keyframes bombRightOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: rotate(0deg); filter: blur(0px); } 50% { opacity: 1; transform-origin: 200% 50%; transform: rotate(160deg); filter: blur(0px); } 100% { opacity: 0; transform-origin: 200% 50%; transform: rotate(160deg); filter: blur(20px); } } @keyframes bombRightOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: rotate(0deg); filter: blur(0px); } 50% { opacity: 1; transform-origin: 200% 50%; transform: rotate(160deg); filter: blur(0px); } 100% { opacity: 0; transform-origin: 200% 50%; transform: rotate(160deg); filter: blur(20px); } } .magic { -webkit-animation-name: magic; animation-name: magic; } @-webkit-keyframes magic { 0% { opacity: 1; transform-origin: 100% 200%; transform: scale(1, 1) rotate(0deg); } 100% { opacity: 0; transform-origin: 200% 500%; transform: scale(0, 0) rotate(270deg); } } @keyframes magic { 0% { opacity: 1; transform-origin: 100% 200%; transform: scale(1, 1) rotate(0deg); } 100% { opacity: 0; transform-origin: 200% 500%; transform: scale(0, 0) rotate(270deg); } } .swap { -webkit-animation-name: swap; animation-name: swap; } @-webkit-keyframes swap { 0% { opacity: 0; transform-origin: 0 100%; transform: scale(0, 0) translate(-700px, 0px); } 100% { opacity: 1; transform-origin: 100% 100%; transform: scale(1, 1) translate(0px, 0px); } } @keyframes swap { 0% { opacity: 0; transform-origin: 0 100%; transform: scale(0, 0) translate(-700px, 0px); } 100% { opacity: 1; transform-origin: 100% 100%; transform: scale(1, 1) translate(0px, 0px); } } .twisterInDown { -webkit-animation-name: twisterInDown; animation-name: twisterInDown; } @-webkit-keyframes twisterInDown { 0% { opacity: 0; transform-origin: 0 100%; transform: scale(0, 0) rotate(360deg) translateY(-100%); } 30% { transform-origin: 0 100%; transform: scale(0, 0) rotate(360deg) translateY(-100%); } 100% { opacity: 1; transform-origin: 100% 100%; transform: scale(1, 1) rotate(0deg) translateY(0%); } } @keyframes twisterInDown { 0% { opacity: 0; transform-origin: 0 100%; transform: scale(0, 0) rotate(360deg) translateY(-100%); } 30% { transform-origin: 0 100%; transform: scale(0, 0) rotate(360deg) translateY(-100%); } 100% { opacity: 1; transform-origin: 100% 100%; transform: scale(1, 1) rotate(0deg) translateY(0%); } } .twisterInUp { -webkit-animation-name: twisterInUp; animation-name: twisterInUp; } @-webkit-keyframes twisterInUp { 0% { opacity: 0; transform-origin: 100% 0; transform: scale(0, 0) rotate(360deg) translateY(100%); } 30% { transform-origin: 100% 0; transform: scale(0, 0) rotate(360deg) translateY(100%); } 100% { opacity: 1; transform-origin: 0 0; transform: scale(1, 1) rotate(0deg) translateY(0); } } @keyframes twisterInUp { 0% { opacity: 0; transform-origin: 100% 0; transform: scale(0, 0) rotate(360deg) translateY(100%); } 30% { transform-origin: 100% 0; transform: scale(0, 0) rotate(360deg) translateY(100%); } 100% { opacity: 1; transform-origin: 0 0; transform: scale(1, 1) rotate(0deg) translateY(0); } } .foolishIn { -webkit-animation-name: foolishIn; animation-name: foolishIn; } @-webkit-keyframes foolishIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0) rotate(360deg); } 20% { opacity: 1; transform-origin: 0% 100%; transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; transform-origin: 100% 100%; transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; transform-origin: 0%; transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; transform-origin: 0% 0%; transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1) rotate(0deg); } } @keyframes foolishIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0) rotate(360deg); } 20% { opacity: 1; transform-origin: 0% 100%; transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; transform-origin: 100% 100%; transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; transform-origin: 0%; transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; transform-origin: 0% 0%; transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1) rotate(0deg); } } .foolishOut { -webkit-animation-name: foolishOut; animation-name: foolishOut; } @-webkit-keyframes foolishOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1) rotate(360deg); } 20% { opacity: 1; transform-origin: 0% 0%; transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; transform-origin: 100% 0%; transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; transform-origin: 0%; transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; transform-origin: 0% 100%; transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0) rotate(0deg); } } @keyframes foolishOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1) rotate(360deg); } 20% { opacity: 1; transform-origin: 0% 0%; transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; transform-origin: 100% 0%; transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; transform-origin: 0%; transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; transform-origin: 0% 100%; transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0) rotate(0deg); } } .holeOut { -webkit-animation-name: holeOut; animation-name: holeOut; } @-webkit-keyframes holeOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1) rotateY(0deg); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0) rotateY(180deg); } } @keyframes holeOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1) rotateY(0deg); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0) rotateY(180deg); } } .swashIn { -webkit-animation-name: swashIn; animation-name: swashIn; } @-webkit-keyframes swashIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0); } 90% { opacity: 1; transform-origin: 50% 50%; transform: scale(0.9, 0.9); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); } } @keyframes swashIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0); } 90% { opacity: 1; transform-origin: 50% 50%; transform: scale(0.9, 0.9); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); } } .swashOut { -webkit-animation-name: swashOut; animation-name: swashOut; } @-webkit-keyframes swashOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); } 80% { opacity: 1; transform-origin: 50% 50%; transform: scale(0.9, 0.9); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0); } } @keyframes swashOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); } 80% { opacity: 1; transform-origin: 50% 50%; transform: scale(0.9, 0.9); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0); } } .spaceInDown { -webkit-animation-name: spaceInDown; animation-name: spaceInDown; } @-webkit-keyframes spaceInDown { 0% { opacity: 0; transform-origin: 50% 100%; transform: scale(0.2) translate(0%, 200%); } 100% { opacity: 1; transform-origin: 50% 100%; transform: scale(1) translate(0%, 0%); } } @keyframes spaceInDown { 0% { opacity: 0; transform-origin: 50% 100%; transform: scale(0.2) translate(0%, 200%); } 100% { opacity: 1; transform-origin: 50% 100%; transform: scale(1) translate(0%, 0%); } } .spaceInLeft { -webkit-animation-name: spaceInLeft; animation-name: spaceInLeft; } @-webkit-keyframes spaceInLeft { 0% { opacity: 0; transform-origin: 0% 50%; transform: scale(0.2) translate(-200%, 0%); } 100% { opacity: 1; transform-origin: 0% 50%; transform: scale(1) translate(0%, 0%); } } @keyframes spaceInLeft { 0% { opacity: 0; transform-origin: 0% 50%; transform: scale(0.2) translate(-200%, 0%); } 100% { opacity: 1; transform-origin: 0% 50%; transform: scale(1) translate(0%, 0%); } } .spaceInRight { -webkit-animation-name: spaceInRight; animation-name: spaceInRight; } @-webkit-keyframes spaceInRight { 0% { opacity: 0; transform-origin: 100% 50%; transform: scale(0.2) translate(200%, 0%); } 100% { opacity: 1; transform-origin: 100% 50%; transform: scale(1) translate(0%, 0%); } } @keyframes spaceInRight { 0% { opacity: 0; transform-origin: 100% 50%; transform: scale(0.2) translate(200%, 0%); } 100% { opacity: 1; transform-origin: 100% 50%; transform: scale(1) translate(0%, 0%); } } .spaceInUp { -webkit-animation-name: spaceInUp; animation-name: spaceInUp; } @-webkit-keyframes spaceInUp { 0% { opacity: 0; transform-origin: 50% 0%; transform: scale(0.2) translate(0%, -200%); } 100% { opacity: 1; transform-origin: 50% 0%; transform: scale(1) translate(0%, 0%); } } @keyframes spaceInUp { 0% { opacity: 0; transform-origin: 50% 0%; transform: scale(0.2) translate(0%, -200%); } 100% { opacity: 1; transform-origin: 50% 0%; transform: scale(1) translate(0%, 0%); } } .spaceOutDown { -webkit-animation-name: spaceOutDown; animation-name: spaceOutDown; } @-webkit-keyframes spaceOutDown { 0% { opacity: 1; transform-origin: 50% 100%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 50% 100%; transform: scale(0.2) translate(0%, 200%); } } @keyframes spaceOutDown { 0% { opacity: 1; transform-origin: 50% 100%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 50% 100%; transform: scale(0.2) translate(0%, 200%); } } .spaceOutLeft { -webkit-animation-name: spaceOutLeft; animation-name: spaceOutLeft; } @-webkit-keyframes spaceOutLeft { 0% { opacity: 1; transform-origin: 0% 50%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 0% 50%; transform: scale(0.2) translate(-200%, 0%); } } @keyframes spaceOutLeft { 0% { opacity: 1; transform-origin: 0% 50%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 0% 50%; transform: scale(0.2) translate(-200%, 0%); } } .spaceOutRight { -webkit-animation-name: spaceOutRight; animation-name: spaceOutRight; } @-webkit-keyframes spaceOutRight { 0% { opacity: 1; transform-origin: 100% 50%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 100% 50%; transform: scale(0.2) translate(200%, 0%); } } @keyframes spaceOutRight { 0% { opacity: 1; transform-origin: 100% 50%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 100% 50%; transform: scale(0.2) translate(200%, 0%); } } .spaceOutUp { -webkit-animation-name: spaceOutUp; animation-name: spaceOutUp; } @-webkit-keyframes spaceOutUp { 0% { opacity: 1; transform-origin: 50% 0%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 50% 0%; transform: scale(0.2) translate(0%, -200%); } } @keyframes spaceOutUp { 0% { opacity: 1; transform-origin: 50% 0%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 50% 0%; transform: scale(0.2) translate(0%, -200%); } } .perspectiveDown { -webkit-animation-name: perspectiveDown; animation-name: perspectiveDown; } @-webkit-keyframes perspectiveDown { 0% { transform-origin: 0 100%; transform: perspective(800px) rotateX(0deg); } 100% { transform-origin: 0 100%; transform: perspective(800px) rotateX(-180deg); } } @keyframes perspectiveDown { 0% { transform-origin: 0 100%; transform: perspective(800px) rotateX(0deg); } 100% { transform-origin: 0 100%; transform: perspective(800px) rotateX(-180deg); } } .perspectiveDownReturn { -webkit-animation-name: perspectiveDownReturn; animation-name: perspectiveDownReturn; } @-webkit-keyframes perspectiveDownReturn { 0% { transform-origin: 0 100%; transform: perspective(800px) rotateX(-180deg); } 100% { transform-origin: 0 100%; transform: perspective(800px) rotateX(0deg); } } @keyframes perspectiveDownReturn { 0% { transform-origin: 0 100%; transform: perspective(800px) rotateX(-180deg); } 100% { transform-origin: 0 100%; transform: perspective(800px) rotateX(0deg); } } .perspectiveLeft { -webkit-animation-name: perspectiveLeft; animation-name: perspectiveLeft; } @-webkit-keyframes perspectiveLeft { 0% { transform-origin: 0 0; transform: perspective(800px) rotateY(0deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateY(-180deg); } } @keyframes perspectiveLeft { 0% { transform-origin: 0 0; transform: perspective(800px) rotateY(0deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateY(-180deg); } } .perspectiveLeftReturn { -webkit-animation-name: perspectiveLeftReturn; animation-name: perspectiveLeftReturn; } @-webkit-keyframes perspectiveLeftReturn { 0% { transform-origin: 0 0; transform: perspective(800px) rotateY(-180deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateY(0deg); } } @keyframes perspectiveLeftReturn { 0% { transform-origin: 0 0; transform: perspective(800px) rotateY(-180deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateY(0deg); } } .perspectiveRight { -webkit-animation-name: perspectiveRight; animation-name: perspectiveRight; } @-webkit-keyframes perspectiveRight { 0% { transform-origin: 100% 0; transform: perspective(800px) rotateY(0deg); } 100% { transform-origin: 100% 0; transform: perspective(800px) rotateY(180deg); } } @keyframes perspectiveRight { 0% { transform-origin: 100% 0; transform: perspective(800px) rotateY(0deg); } 100% { transform-origin: 100% 0; transform: perspective(800px) rotateY(180deg); } } .perspectiveRightReturn { -webkit-animation-name: perspectiveRightReturn; animation-name: perspectiveRightReturn; } @-webkit-keyframes perspectiveRightReturn { 0% { transform-origin: 100% 0; transform: perspective(800px) rotateY(180deg); } 100% { transform-origin: 100% 0; transform: perspective(800px) rotateY(0deg); } } @keyframes perspectiveRightReturn { 0% { transform-origin: 100% 0; transform: perspective(800px) rotateY(180deg); } 100% { transform-origin: 100% 0; transform: perspective(800px) rotateY(0deg); } } .perspectiveUp { -webkit-animation-name: perspectiveUp; animation-name: perspectiveUp; } @-webkit-keyframes perspectiveUp { 0% { transform-origin: 0 0; transform: perspective(800px) rotateX(0deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateX(180deg); } } @keyframes perspectiveUp { 0% { transform-origin: 0 0; transform: perspective(800px) rotateX(0deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateX(180deg); } } .perspectiveUpReturn { -webkit-animation-name: perspectiveUpReturn; animation-name: perspectiveUpReturn; } @-webkit-keyframes perspectiveUpReturn { 0% { transform-origin: 0 0; transform: perspective(800px) rotateX(180deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateX(0deg); } } @keyframes perspectiveUpReturn { 0% { transform-origin: 0 0; transform: perspective(800px) rotateX(180deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateX(0deg); } } .rotateDown { -webkit-animation-name: rotateDown; animation-name: rotateDown; } @-webkit-keyframes rotateDown { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateX(0deg) translateZ(0px); } 100% { opacity: 0; transform-origin: 50% 100%; transform: perspective(800px) rotateX(-180deg) translateZ(300px); } } @keyframes rotateDown { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateX(0deg) translateZ(0px); } 100% { opacity: 0; transform-origin: 50% 100%; transform: perspective(800px) rotateX(-180deg) translateZ(300px); } } .rotateLeft { -webkit-animation-name: rotateLeft; animation-name: rotateLeft; } @-webkit-keyframes rotateLeft { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateY(0deg) translateZ(0px); } 100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateY(-180deg) translateZ(300px); } } @keyframes rotateLeft { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateY(0deg) translateZ(0px); } 100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateY(-180deg) translateZ(300px); } } .rotateRight { -webkit-animation-name: rotateRight; animation-name: rotateRight; } @-webkit-keyframes rotateRight { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateY(0deg) translate3d(0px); } 100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateY(180deg) translateZ(150px); } } @keyframes rotateRight { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateY(0deg) translate3d(0px); } 100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateY(180deg) translateZ(150px); } } .rotateUp { -webkit-animation-name: rotateUp; animation-name: rotateUp; } @-webkit-keyframes rotateUp { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateX(0deg) translateZ(0px); } 100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateX(180deg) translateZ(100px); } } @keyframes rotateUp { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateX(0deg) translateZ(0px); } 100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateX(180deg) translateZ(100px); } } .slideDown { -webkit-animation-name: slideDown; animation-name: slideDown; } @-webkit-keyframes slideDown { 0% { transform-origin: 0 0; transform: translateY(0%); } 100% { transform-origin: 0 0; transform: translateY(100%); } } @keyframes slideDown { 0% { transform-origin: 0 0; transform: translateY(0%); } 100% { transform-origin: 0 0; transform: translateY(100%); } } .slideDownReturn { -webkit-animation-name: slideDownReturn; animation-name: slideDownReturn; } @-webkit-keyframes slideDownReturn { 0% { transform-origin: 0 0; transform: translateY(100%); } 100% { transform-origin: 0 0; transform: translateY(0%); } } @keyframes slideDownReturn { 0% { transform-origin: 0 0; transform: translateY(100%); } 100% { transform-origin: 0 0; transform: translateY(0%); } } .slideLeft { -webkit-animation-name: slideLeft; animation-name: slideLeft; } @-webkit-keyframes slideLeft { 0% { transform-origin: 0 0; transform: translateX(0%); } 100% { transform-origin: 0 0; transform: translateX(-100%); } } @keyframes slideLeft { 0% { transform-origin: 0 0; transform: translateX(0%); } 100% { transform-origin: 0 0; transform: translateX(-100%); } } .slideLeftReturn { -webkit-animation-name: slideLeftReturn; animation-name: slideLeftReturn; } @-webkit-keyframes slideLeftReturn { 0% { transform-origin: 0 0; transform: translateX(-100%); } 100% { transform-origin: 0 0; transform: translateX(0%); } } @keyframes slideLeftReturn { 0% { transform-origin: 0 0; transform: translateX(-100%); } 100% { transform-origin: 0 0; transform: translateX(0%); } } .slideRight { -webkit-animation-name: slideRight; animation-name: slideRight; } @-webkit-keyframes slideRight { 0% { transform-origin: 0 0; transform: translateX(0%); } 100% { transform-origin: 0 0; transform: translateX(100%); } } @keyframes slideRight { 0% { transform-origin: 0 0; transform: translateX(0%); } 100% { transform-origin: 0 0; transform: translateX(100%); } } .slideRightReturn { -webkit-animation-name: slideRightReturn; animation-name: slideRightReturn; } @-webkit-keyframes slideRightReturn { 0% { transform-origin: 0 0; transform: translateX(100%); } 100% { transform-origin: 0 0; transform: translateX(0%); } } @keyframes slideRightReturn { 0% { transform-origin: 0 0; transform: translateX(100%); } 100% { transform-origin: 0 0; transform: translateX(0%); } } .slideUp { -webkit-animation-name: slideUp; animation-name: slideUp; } @-webkit-keyframes slideUp { 0% { transform-origin: 0 0; transform: translateY(0%); } 100% { transform-origin: 0 0; transform: translateY(-100%); } } @keyframes slideUp { 0% { transform-origin: 0 0; transform: translateY(0%); } 100% { transform-origin: 0 0; transform: translateY(-100%); } } .slideUpReturn { -webkit-animation-name: slideUpReturn; animation-name: slideUpReturn; } @-webkit-keyframes slideUpReturn { 0% { transform-origin: 0 0; transform: translateY(-100%); } 100% { transform-origin: 0 0; transform: translateY(0%); } } @keyframes slideUpReturn { 0% { transform-origin: 0 0; transform: translateY(-100%); } 100% { transform-origin: 0 0; transform: translateY(0%); } } .openDownLeft { -webkit-animation-name: openDownLeft; animation-name: openDownLeft; } @-webkit-keyframes openDownLeft { 0% { transform-origin: bottom left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { transform-origin: bottom left; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @keyframes openDownLeft { 0% { transform-origin: bottom left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { transform-origin: bottom left; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } .openDownLeftReturn { -webkit-animation-name: openDownLeftReturn; animation-name: openDownLeftReturn; } @-webkit-keyframes openDownLeftReturn { 0% { transform-origin: bottom left; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { transform-origin: bottom left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes openDownLeftReturn { 0% { transform-origin: bottom left; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { transform-origin: bottom left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .openDownRight { -webkit-animation-name: openDownRight; animation-name: openDownRight; } @-webkit-keyframes openDownRight { 0% { transform-origin: bottom right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { transform-origin: bottom right; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @keyframes openDownRight { 0% { transform-origin: bottom right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { transform-origin: bottom right; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } .openDownRightReturn { -webkit-animation-name: openDownRightReturn; animation-name: openDownRightReturn; } @-webkit-keyframes openDownRightReturn { 0% { transform-origin: bottom right; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { transform-origin: bottom right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes openDownRightReturn { 0% { transform-origin: bottom right; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { transform-origin: bottom right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .openUpLeft { -webkit-animation-name: openUpLeft; animation-name: openUpLeft; } @-webkit-keyframes openUpLeft { 0% { transform-origin: top left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { transform-origin: top left; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @keyframes openUpLeft { 0% { transform-origin: top left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { transform-origin: top left; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } .openUpLeftReturn { -webkit-animation-name: openUpLeftReturn; animation-name: openUpLeftReturn; } @-webkit-keyframes openUpLeftReturn { 0% { transform-origin: top left; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { transform-origin: top left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes openUpLeftReturn { 0% { transform-origin: top left; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { transform-origin: top left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .openUpRight { -webkit-animation-name: openUpRight; animation-name: openUpRight; } @-webkit-keyframes openUpRight { 0% { transform-origin: top right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { transform-origin: top right; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @keyframes openUpRight { 0% { transform-origin: top right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { transform-origin: top right; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } .openUpRightReturn { -webkit-animation-name: openUpRightReturn; animation-name: openUpRightReturn; } @-webkit-keyframes openUpRightReturn { 0% { transform-origin: top right; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { transform-origin: top right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes openUpRightReturn { 0% { transform-origin: top right; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { transform-origin: top right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .openDownLeftOut { -webkit-animation-name: openDownLeftOut; animation-name: openDownLeftOut; } @-webkit-keyframes openDownLeftOut { 0% { opacity: 1; transform-origin: bottom left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: bottom left; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @keyframes openDownLeftOut { 0% { opacity: 1; transform-origin: bottom left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: bottom left; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } .openDownRightOut { -webkit-animation-name: openDownRightOut; animation-name: openDownRightOut; } @-webkit-keyframes openDownRightOut { 0% { opacity: 1; transform-origin: bottom right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: bottom right; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @keyframes openDownRightOut { 0% { opacity: 1; transform-origin: bottom right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: bottom right; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } .openUpLeftOut { -webkit-animation-name: openUpLeftOut; animation-name: openUpLeftOut; } @-webkit-keyframes openUpLeftOut { 0% { opacity: 1; transform-origin: top left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: top left; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @keyframes openUpLeftOut { 0% { opacity: 1; transform-origin: top left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: top left; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } .openUpRightOut { -webkit-animation-name: openUpRightOut; animation-name: openUpRightOut; } @-webkit-keyframes openUpRightOut { 0% { opacity: 1; transform-origin: top right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: top right; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @keyframes openUpRightOut { 0% { opacity: 1; transform-origin: top right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: top right; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } .tinDownIn { -webkit-animation-name: tinDownIn; animation-name: tinDownIn; } @-webkit-keyframes tinDownIn { 0% { opacity: 0; transform: scale(1, 1) translateY(900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateY(0); } } @keyframes tinDownIn { 0% { opacity: 0; transform: scale(1, 1) translateY(900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateY(0); } } .tinDownOut { -webkit-animation-name: tinDownOut; animation-name: tinDownOut; } @-webkit-keyframes tinDownOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; transform: scale(1, 1) translateY(900%); } } @keyframes tinDownOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; transform: scale(1, 1) translateY(900%); } } .tinLeftIn { -webkit-animation-name: tinLeftIn; animation-name: tinLeftIn; } @-webkit-keyframes tinLeftIn { 0% { opacity: 0; transform: scale(1, 1) translateX(-900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateX(0); } } @keyframes tinLeftIn { 0% { opacity: 0; transform: scale(1, 1) translateX(-900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateX(0); } } .tinLeftOut { -webkit-animation-name: tinLeftOut; animation-name: tinLeftOut; } @-webkit-keyframes tinLeftOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; transform: scale(1, 1) translateX(-900%); } } @keyframes tinLeftOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; transform: scale(1, 1) translateX(-900%); } } .tinRightIn { -webkit-animation-name: tinRightIn; animation-name: tinRightIn; } @-webkit-keyframes tinRightIn { 0% { opacity: 0; transform: scale(1, 1) translateX(900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateX(0); } } @keyframes tinRightIn { 0% { opacity: 0; transform: scale(1, 1) translateX(900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateX(0); } } .tinRightOut { -webkit-animation-name: tinRightOut; animation-name: tinRightOut; } @-webkit-keyframes tinRightOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; transform: scale(1, 1) translateX(900%); } } @keyframes tinRightOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; transform: scale(1, 1) translateX(900%); } } .tinUpIn { -webkit-animation-name: tinUpIn; animation-name: tinUpIn; } @-webkit-keyframes tinUpIn { 0% { opacity: 0; transform: scale(1, 1) translateY(-900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateY(0); } } @keyframes tinUpIn { 0% { opacity: 0; transform: scale(1, 1) translateY(-900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateY(0); } } .tinUpOut { -webkit-animation-name: tinUpOut; animation-name: tinUpOut; } @-webkit-keyframes tinUpOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; transform: scale(1, 1) translateY(-900%); } } @keyframes tinUpOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; transform: scale(1, 1) translateY(-900%); } } .magictime { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @media (print), (prefers-reduced-motion) { .magictime { -webkit-animation: unset !important; animation: unset !important; transition: none !important; } } /*# sourceMappingURL=magic.css.map */ /*! * * * * * * * * * * * * * * * * * * * *\ CSShake :: Package v1.6.0 CSS classes to move your DOM (c) 2015 @elrumordelaluz http://elrumordelaluz.github.io/csshake/ Licensed under MIT \* * * * * * * * * * * * * * * * * * * * */ .shake-chunk, .shake-crazy, .shake-opacity, .shake-rotate, .shake-vertical, .shake-horizontal, .shake-hard, .shake-slow, .shake-little, .shake { display: inherit; transform-origin: center center; } .shake-freeze, .shake-constant.shake-constant--hover:hover, .shake-trigger:hover .shake-constant.shake-constant--hover { animation-play-state: paused; } .shake-chunk:hover, .shake-trigger:hover .shake-chunk, .shake-crazy:hover, .shake-trigger:hover .shake-crazy, .shake-opacity:hover, .shake-trigger:hover .shake-opacity, .shake-rotate:hover, .shake-trigger:hover .shake-rotate, .shake-vertical:hover, .shake-trigger:hover .shake-vertical, .shake-horizontal:hover, .shake-trigger:hover .shake-horizontal, .shake-hard:hover, .shake-trigger:hover .shake-hard, .shake-slow:hover, .shake-trigger:hover .shake-slow, .shake-little:hover, .shake-trigger:hover .shake-little, .shake:hover, .shake-trigger:hover .shake, .shake-freeze:hover, .shake-trigger:hover .shake-freeze { animation-play-state: running; } @keyframes shake { 2% { transform: translate(2.5px, -1.5px) rotate(1.5deg); } 4% { transform: translate(-0.5px, -0.5px) rotate(0.5deg); } 6% { transform: translate(-0.5px, 2.5px) rotate(-0.5deg); } 8% { transform: translate(-0.5px, -1.5px) rotate(0.5deg); } 10% { transform: translate(-0.5px, 0.5px) rotate(-0.5deg); } 12% { transform: translate(0.5px, -1.5px) rotate(-0.5deg); } 14% { transform: translate(2.5px, 2.5px) rotate(0.5deg); } 16% { transform: translate(1.5px, -0.5px) rotate(0.5deg); } 18% { transform: translate(-1.5px, 2.5px) rotate(1.5deg); } 20% { transform: translate(1.5px, 2.5px) rotate(1.5deg); } 22% { transform: translate(2.5px, -1.5px) rotate(0.5deg); } 24% { transform: translate(-0.5px, 1.5px) rotate(1.5deg); } 26% { transform: translate(1.5px, -0.5px) rotate(-0.5deg); } 28% { transform: translate(0.5px, 1.5px) rotate(0.5deg); } 30% { transform: translate(0.5px, -1.5px) rotate(1.5deg); } 32% { transform: translate(0.5px, 0.5px) rotate(0.5deg); } 34% { transform: translate(-0.5px, 2.5px) rotate(1.5deg); } 36% { transform: translate(2.5px, 2.5px) rotate(1.5deg); } 38% { transform: translate(-0.5px, 0.5px) rotate(1.5deg); } 40% { transform: translate(-1.5px, -1.5px) rotate(1.5deg); } 42% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); } 44% { transform: translate(0.5px, -0.5px) rotate(1.5deg); } 46% { transform: translate(1.5px, 1.5px) rotate(-0.5deg); } 48% { transform: translate(-1.5px, -1.5px) rotate(-0.5deg); } 50% { transform: translate(2.5px, 2.5px) rotate(1.5deg); } 52% { transform: translate(2.5px, -0.5px) rotate(0.5deg); } 54% { transform: translate(-1.5px, -1.5px) rotate(0.5deg); } 56% { transform: translate(-0.5px, 0.5px) rotate(1.5deg); } 58% { transform: translate(-0.5px, -0.5px) rotate(1.5deg); } 60% { transform: translate(-0.5px, 2.5px) rotate(1.5deg); } 62% { transform: translate(-0.5px, -0.5px) rotate(0.5deg); } 64% { transform: translate(1.5px, 0.5px) rotate(-0.5deg); } 66% { transform: translate(-1.5px, -1.5px) rotate(0.5deg); } 68% { transform: translate(-0.5px, 0.5px) rotate(0.5deg); } 70% { transform: translate(-0.5px, -0.5px) rotate(1.5deg); } 72% { transform: translate(-1.5px, 2.5px) rotate(1.5deg); } 74% { transform: translate(-0.5px, 0.5px) rotate(0.5deg); } 76% { transform: translate(-0.5px, -1.5px) rotate(0.5deg); } 78% { transform: translate(1.5px, 1.5px) rotate(1.5deg); } 80% { transform: translate(2.5px, -0.5px) rotate(0.5deg); } 82% { transform: translate(1.5px, 1.5px) rotate(0.5deg); } 84% { transform: translate(2.5px, -1.5px) rotate(0.5deg); } 86% { transform: translate(-1.5px, -0.5px) rotate(1.5deg); } 88% { transform: translate(2.5px, -1.5px) rotate(0.5deg); } 90% { transform: translate(-0.5px, 2.5px) rotate(-0.5deg); } 92% { transform: translate(1.5px, 2.5px) rotate(1.5deg); } 94% { transform: translate(1.5px, -1.5px) rotate(1.5deg); } 96% { transform: translate(2.5px, 0.5px) rotate(0.5deg); } 98% { transform: translate(0.5px, 1.5px) rotate(1.5deg); } 0%, 100% { transform: translate(0, 0) rotate(0); } } .shake:hover, .shake-trigger:hover .shake, .shake.shake-freeze, .shake.shake-constant { animation-name: shake; animation-duration: 100ms; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes shake-little { 2% { transform: translate(0px, 1px) rotate(0.5deg); } 4% { transform: translate(0px, 0px) rotate(0.5deg); } 6% { transform: translate(0px, 0px) rotate(0.5deg); } 8% { transform: translate(0px, 0px) rotate(0.5deg); } 10% { transform: translate(1px, 0px) rotate(0.5deg); } 12% { transform: translate(1px, 1px) rotate(0.5deg); } 14% { transform: translate(0px, 1px) rotate(0.5deg); } 16% { transform: translate(1px, 0px) rotate(0.5deg); } 18% { transform: translate(0px, 1px) rotate(0.5deg); } 20% { transform: translate(0px, 1px) rotate(0.5deg); } 22% { transform: translate(0px, 0px) rotate(0.5deg); } 24% { transform: translate(0px, 1px) rotate(0.5deg); } 26% { transform: translate(1px, 1px) rotate(0.5deg); } 28% { transform: translate(1px, 0px) rotate(0.5deg); } 30% { transform: translate(0px, 1px) rotate(0.5deg); } 32% { transform: translate(0px, 1px) rotate(0.5deg); } 34% { transform: translate(1px, 1px) rotate(0.5deg); } 36% { transform: translate(0px, 0px) rotate(0.5deg); } 38% { transform: translate(0px, 0px) rotate(0.5deg); } 40% { transform: translate(1px, 0px) rotate(0.5deg); } 42% { transform: translate(1px, 1px) rotate(0.5deg); } 44% { transform: translate(1px, 1px) rotate(0.5deg); } 46% { transform: translate(0px, 0px) rotate(0.5deg); } 48% { transform: translate(0px, 1px) rotate(0.5deg); } 50% { transform: translate(0px, 1px) rotate(0.5deg); } 52% { transform: translate(0px, 0px) rotate(0.5deg); } 54% { transform: translate(1px, 1px) rotate(0.5deg); } 56% { transform: translate(1px, 0px) rotate(0.5deg); } 58% { transform: translate(0px, 1px) rotate(0.5deg); } 60% { transform: translate(0px, 1px) rotate(0.5deg); } 62% { transform: translate(0px, 0px) rotate(0.5deg); } 64% { transform: translate(1px, 0px) rotate(0.5deg); } 66% { transform: translate(0px, 1px) rotate(0.5deg); } 68% { transform: translate(1px, 1px) rotate(0.5deg); } 70% { transform: translate(0px, 0px) rotate(0.5deg); } 72% { transform: translate(1px, 1px) rotate(0.5deg); } 74% { transform: translate(1px, 1px) rotate(0.5deg); } 76% { transform: translate(1px, 0px) rotate(0.5deg); } 78% { transform: translate(1px, 0px) rotate(0.5deg); } 80% { transform: translate(1px, 0px) rotate(0.5deg); } 82% { transform: translate(0px, 0px) rotate(0.5deg); } 84% { transform: translate(0px, 1px) rotate(0.5deg); } 86% { transform: translate(1px, 0px) rotate(0.5deg); } 88% { transform: translate(1px, 0px) rotate(0.5deg); } 90% { transform: translate(1px, 0px) rotate(0.5deg); } 92% { transform: translate(0px, 1px) rotate(0.5deg); } 94% { transform: translate(0px, 0px) rotate(0.5deg); } 96% { transform: translate(1px, 0px) rotate(0.5deg); } 98% { transform: translate(1px, 0px) rotate(0.5deg); } 0%, 100% { transform: translate(0, 0) rotate(0); } } .shake-little:hover, .shake-trigger:hover .shake-little, .shake-little.shake-freeze, .shake-little.shake-constant { animation-name: shake-little; animation-duration: 100ms; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes shake-slow { 2% { transform: translate(8px, -4px) rotate(-1.5deg); } 4% { transform: translate(-4px, 10px) rotate(0.5deg); } 6% { transform: translate(4px, -6px) rotate(-1.5deg); } 8% { transform: translate(9px, 0px) rotate(2.5deg); } 10% { transform: translate(-5px, -2px) rotate(1.5deg); } 12% { transform: translate(5px, -8px) rotate(-0.5deg); } 14% { transform: translate(10px, -2px) rotate(-2.5deg); } 16% { transform: translate(0px, 6px) rotate(0.5deg); } 18% { transform: translate(-5px, 10px) rotate(0.5deg); } 20% { transform: translate(9px, 2px) rotate(2.5deg); } 22% { transform: translate(-1px, 0px) rotate(-0.5deg); } 24% { transform: translate(7px, 4px) rotate(1.5deg); } 26% { transform: translate(-1px, 7px) rotate(1.5deg); } 28% { transform: translate(10px, -9px) rotate(0.5deg); } 30% { transform: translate(4px, 4px) rotate(-2.5deg); } 32% { transform: translate(-8px, 0px) rotate(0.5deg); } 34% { transform: translate(-8px, -2px) rotate(2.5deg); } 36% { transform: translate(-6px, -7px) rotate(1.5deg); } 38% { transform: translate(10px, -7px) rotate(2.5deg); } 40% { transform: translate(-7px, -8px) rotate(-1.5deg); } 42% { transform: translate(-9px, -3px) rotate(-0.5deg); } 44% { transform: translate(5px, -3px) rotate(-2.5deg); } 46% { transform: translate(-4px, 2px) rotate(3.5deg); } 48% { transform: translate(-7px, -1px) rotate(-0.5deg); } 50% { transform: translate(0px, -4px) rotate(2.5deg); } 52% { transform: translate(8px, -2px) rotate(2.5deg); } 54% { transform: translate(9px, 3px) rotate(-0.5deg); } 56% { transform: translate(-1px, 1px) rotate(-1.5deg); } 58% { transform: translate(1px, 6px) rotate(-2.5deg); } 60% { transform: translate(-6px, 7px) rotate(1.5deg); } 62% { transform: translate(2px, -4px) rotate(-1.5deg); } 64% { transform: translate(10px, 8px) rotate(3.5deg); } 66% { transform: translate(-7px, 4px) rotate(3.5deg); } 68% { transform: translate(-7px, -8px) rotate(0.5deg); } 70% { transform: translate(8px, -6px) rotate(0.5deg); } 72% { transform: translate(8px, -9px) rotate(-0.5deg); } 74% { transform: translate(-1px, -4px) rotate(2.5deg); } 76% { transform: translate(10px, -9px) rotate(-2.5deg); } 78% { transform: translate(-5px, -8px) rotate(-1.5deg); } 80% { transform: translate(5px, 0px) rotate(-0.5deg); } 82% { transform: translate(-3px, 5px) rotate(3.5deg); } 84% { transform: translate(4px, 1px) rotate(2.5deg); } 86% { transform: translate(-1px, 0px) rotate(-2.5deg); } 88% { transform: translate(8px, 10px) rotate(-1.5deg); } 90% { transform: translate(8px, -1px) rotate(-0.5deg); } 92% { transform: translate(5px, 7px) rotate(-0.5deg); } 94% { transform: translate(-1px, -1px) rotate(0.5deg); } 96% { transform: translate(-8px, -2px) rotate(-1.5deg); } 98% { transform: translate(6px, -9px) rotate(-0.5deg); } 0%, 100% { transform: translate(0, 0) rotate(0); } } .shake-slow:hover, .shake-trigger:hover .shake-slow, .shake-slow.shake-freeze, .shake-slow.shake-constant { animation-name: shake-slow; animation-duration: 5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes shake-hard { 2% { transform: translate(4px, 5px) rotate(-1.5deg); } 4% { transform: translate(-5px, -7px) rotate(-2.5deg); } 6% { transform: translate(2px, 2px) rotate(0.5deg); } 8% { transform: translate(-7px, -9px) rotate(3.5deg); } 10% { transform: translate(1px, -1px) rotate(-2.5deg); } 12% { transform: translate(8px, 5px) rotate(2.5deg); } 14% { transform: translate(-2px, 6px) rotate(-1.5deg); } 16% { transform: translate(5px, 3px) rotate(2.5deg); } 18% { transform: translate(0px, 6px) rotate(-0.5deg); } 20% { transform: translate(6px, -6px) rotate(1.5deg); } 22% { transform: translate(-6px, 8px) rotate(-2.5deg); } 24% { transform: translate(0px, -1px) rotate(-2.5deg); } 26% { transform: translate(3px, -6px) rotate(-1.5deg); } 28% { transform: translate(6px, 2px) rotate(-1.5deg); } 30% { transform: translate(-1px, 4px) rotate(-0.5deg); } 32% { transform: translate(-2px, 9px) rotate(0.5deg); } 34% { transform: translate(5px, -9px) rotate(0.5deg); } 36% { transform: translate(1px, 1px) rotate(-1.5deg); } 38% { transform: translate(0px, 5px) rotate(-1.5deg); } 40% { transform: translate(-8px, 4px) rotate(1.5deg); } 42% { transform: translate(1px, 2px) rotate(0.5deg); } 44% { transform: translate(-7px, 10px) rotate(-1.5deg); } 46% { transform: translate(9px, 3px) rotate(0.5deg); } 48% { transform: translate(-8px, 10px) rotate(-2.5deg); } 50% { transform: translate(-8px, -7px) rotate(3.5deg); } 52% { transform: translate(-2px, 3px) rotate(-1.5deg); } 54% { transform: translate(4px, 3px) rotate(-2.5deg); } 56% { transform: translate(-2px, 9px) rotate(-0.5deg); } 58% { transform: translate(5px, 6px) rotate(2.5deg); } 60% { transform: translate(2px, -2px) rotate(-2.5deg); } 62% { transform: translate(-5px, -4px) rotate(1.5deg); } 64% { transform: translate(4px, 1px) rotate(-1.5deg); } 66% { transform: translate(-9px, 0px) rotate(-2.5deg); } 68% { transform: translate(9px, 9px) rotate(1.5deg); } 70% { transform: translate(0px, 0px) rotate(-2.5deg); } 72% { transform: translate(10px, -9px) rotate(-0.5deg); } 74% { transform: translate(6px, 6px) rotate(0.5deg); } 76% { transform: translate(-6px, 3px) rotate(3.5deg); } 78% { transform: translate(-1px, -8px) rotate(0.5deg); } 80% { transform: translate(-9px, -8px) rotate(2.5deg); } 82% { transform: translate(-6px, -8px) rotate(-2.5deg); } 84% { transform: translate(0px, 2px) rotate(0.5deg); } 86% { transform: translate(7px, -5px) rotate(0.5deg); } 88% { transform: translate(0px, -3px) rotate(-1.5deg); } 90% { transform: translate(-2px, -3px) rotate(1.5deg); } 92% { transform: translate(-7px, -4px) rotate(3.5deg); } 94% { transform: translate(-3px, -5px) rotate(3.5deg); } 96% { transform: translate(3px, -4px) rotate(-0.5deg); } 98% { transform: translate(8px, -4px) rotate(-1.5deg); } 0%, 100% { transform: translate(0, 0) rotate(0); } } .shake-hard:hover, .shake-trigger:hover .shake-hard, .shake-hard.shake-freeze, .shake-hard.shake-constant { animation-name: shake-hard; animation-duration: 100ms; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes shake-horizontal { 2% { transform: translate(-2px, 0) rotate(0); } 4% { transform: translate(-6px, 0) rotate(0); } 6% { transform: translate(6px, 0) rotate(0); } 8% { transform: translate(6px, 0) rotate(0); } 10% { transform: translate(-3px, 0) rotate(0); } 12% { transform: translate(8px, 0) rotate(0); } 14% { transform: translate(3px, 0) rotate(0); } 16% { transform: translate(0px, 0) rotate(0); } 18% { transform: translate(10px, 0) rotate(0); } 20% { transform: translate(-5px, 0) rotate(0); } 22% { transform: translate(7px, 0) rotate(0); } 24% { transform: translate(10px, 0) rotate(0); } 26% { transform: translate(-4px, 0) rotate(0); } 28% { transform: translate(10px, 0) rotate(0); } 30% { transform: translate(-9px, 0) rotate(0); } 32% { transform: translate(9px, 0) rotate(0); } 34% { transform: translate(-1px, 0) rotate(0); } 36% { transform: translate(-1px, 0) rotate(0); } 38% { transform: translate(10px, 0) rotate(0); } 40% { transform: translate(-2px, 0) rotate(0); } 42% { transform: translate(2px, 0) rotate(0); } 44% { transform: translate(-8px, 0) rotate(0); } 46% { transform: translate(-8px, 0) rotate(0); } 48% { transform: translate(-3px, 0) rotate(0); } 50% { transform: translate(3px, 0) rotate(0); } 52% { transform: translate(-1px, 0) rotate(0); } 54% { transform: translate(7px, 0) rotate(0); } 56% { transform: translate(-2px, 0) rotate(0); } 58% { transform: translate(4px, 0) rotate(0); } 60% { transform: translate(-3px, 0) rotate(0); } 62% { transform: translate(-5px, 0) rotate(0); } 64% { transform: translate(-2px, 0) rotate(0); } 66% { transform: translate(1px, 0) rotate(0); } 68% { transform: translate(-1px, 0) rotate(0); } 70% { transform: translate(-1px, 0) rotate(0); } 72% { transform: translate(0px, 0) rotate(0); } 74% { transform: translate(3px, 0) rotate(0); } 76% { transform: translate(5px, 0) rotate(0); } 78% { transform: translate(9px, 0) rotate(0); } 80% { transform: translate(2px, 0) rotate(0); } 82% { transform: translate(4px, 0) rotate(0); } 84% { transform: translate(-5px, 0) rotate(0); } 86% { transform: translate(8px, 0) rotate(0); } 88% { transform: translate(-4px, 0) rotate(0); } 90% { transform: translate(-7px, 0) rotate(0); } 92% { transform: translate(-8px, 0) rotate(0); } 94% { transform: translate(7px, 0) rotate(0); } 96% { transform: translate(-3px, 0) rotate(0); } 98% { transform: translate(-9px, 0) rotate(0); } 0%, 100% { transform: translate(0, 0) rotate(0); } } .shake-horizontal:hover, .shake-trigger:hover .shake-horizontal, .shake-horizontal.shake-freeze, .shake-horizontal.shake-constant { animation-name: shake-horizontal; animation-duration: 100ms; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes shake-vertical { 2% { transform: translate(0, -3px) rotate(0); } 4% { transform: translate(0, 9px) rotate(0); } 6% { transform: translate(0, 10px) rotate(0); } 8% { transform: translate(0, 5px) rotate(0); } 10% { transform: translate(0, 6px) rotate(0); } 12% { transform: translate(0, 8px) rotate(0); } 14% { transform: translate(0, 10px) rotate(0); } 16% { transform: translate(0, 3px) rotate(0); } 18% { transform: translate(0, 8px) rotate(0); } 20% { transform: translate(0, 4px) rotate(0); } 22% { transform: translate(0, -2px) rotate(0); } 24% { transform: translate(0, 10px) rotate(0); } 26% { transform: translate(0, 4px) rotate(0); } 28% { transform: translate(0, 0px) rotate(0); } 30% { transform: translate(0, 10px) rotate(0); } 32% { transform: translate(0, 7px) rotate(0); } 34% { transform: translate(0, -2px) rotate(0); } 36% { transform: translate(0, 5px) rotate(0); } 38% { transform: translate(0, 10px) rotate(0); } 40% { transform: translate(0, 1px) rotate(0); } 42% { transform: translate(0, 0px) rotate(0); } 44% { transform: translate(0, -6px) rotate(0); } 46% { transform: translate(0, 10px) rotate(0); } 48% { transform: translate(0, 3px) rotate(0); } 50% { transform: translate(0, -1px) rotate(0); } 52% { transform: translate(0, 8px) rotate(0); } 54% { transform: translate(0, 10px) rotate(0); } 56% { transform: translate(0, 0px) rotate(0); } 58% { transform: translate(0, 3px) rotate(0); } 60% { transform: translate(0, 5px) rotate(0); } 62% { transform: translate(0, -2px) rotate(0); } 64% { transform: translate(0, 0px) rotate(0); } 66% { transform: translate(0, 8px) rotate(0); } 68% { transform: translate(0, -6px) rotate(0); } 70% { transform: translate(0, -1px) rotate(0); } 72% { transform: translate(0, 6px) rotate(0); } 74% { transform: translate(0, 7px) rotate(0); } 76% { transform: translate(0, 9px) rotate(0); } 78% { transform: translate(0, -8px) rotate(0); } 80% { transform: translate(0, -3px) rotate(0); } 82% { transform: translate(0, -8px) rotate(0); } 84% { transform: translate(0, -3px) rotate(0); } 86% { transform: translate(0, -4px) rotate(0); } 88% { transform: translate(0, -5px) rotate(0); } 90% { transform: translate(0, -9px) rotate(0); } 92% { transform: translate(0, -4px) rotate(0); } 94% { transform: translate(0, 3px) rotate(0); } 96% { transform: translate(0, 5px) rotate(0); } 98% { transform: translate(0, -9px) rotate(0); } 0%, 100% { transform: translate(0, 0) rotate(0); } } .shake-vertical:hover, .shake-trigger:hover .shake-vertical, .shake-vertical.shake-freeze, .shake-vertical.shake-constant { animation-name: shake-vertical; animation-duration: 100ms; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes shake-rotate { 2% { transform: translate(0, 0) rotate(6.5deg); } 4% { transform: translate(0, 0) rotate(5.5deg); } 6% { transform: translate(0, 0) rotate(1.5deg); } 8% { transform: translate(0, 0) rotate(-2.5deg); } 10% { transform: translate(0, 0) rotate(3.5deg); } 12% { transform: translate(0, 0) rotate(6.5deg); } 14% { transform: translate(0, 0) rotate(0.5deg); } 16% { transform: translate(0, 0) rotate(0.5deg); } 18% { transform: translate(0, 0) rotate(4.5deg); } 20% { transform: translate(0, 0) rotate(-2.5deg); } 22% { transform: translate(0, 0) rotate(3.5deg); } 24% { transform: translate(0, 0) rotate(7.5deg); } 26% { transform: translate(0, 0) rotate(7.5deg); } 28% { transform: translate(0, 0) rotate(-0.5deg); } 30% { transform: translate(0, 0) rotate(-3.5deg); } 32% { transform: translate(0, 0) rotate(0.5deg); } 34% { transform: translate(0, 0) rotate(-1.5deg); } 36% { transform: translate(0, 0) rotate(-5.5deg); } 38% { transform: translate(0, 0) rotate(5.5deg); } 40% { transform: translate(0, 0) rotate(1.5deg); } 42% { transform: translate(0, 0) rotate(-3.5deg); } 44% { transform: translate(0, 0) rotate(-4.5deg); } 46% { transform: translate(0, 0) rotate(6.5deg); } 48% { transform: translate(0, 0) rotate(2.5deg); } 50% { transform: translate(0, 0) rotate(-4.5deg); } 52% { transform: translate(0, 0) rotate(1.5deg); } 54% { transform: translate(0, 0) rotate(-2.5deg); } 56% { transform: translate(0, 0) rotate(-1.5deg); } 58% { transform: translate(0, 0) rotate(5.5deg); } 60% { transform: translate(0, 0) rotate(0.5deg); } 62% { transform: translate(0, 0) rotate(-1.5deg); } 64% { transform: translate(0, 0) rotate(3.5deg); } 66% { transform: translate(0, 0) rotate(2.5deg); } 68% { transform: translate(0, 0) rotate(1.5deg); } 70% { transform: translate(0, 0) rotate(-0.5deg); } 72% { transform: translate(0, 0) rotate(1.5deg); } 74% { transform: translate(0, 0) rotate(4.5deg); } 76% { transform: translate(0, 0) rotate(-0.5deg); } 78% { transform: translate(0, 0) rotate(0.5deg); } 80% { transform: translate(0, 0) rotate(-5.5deg); } 82% { transform: translate(0, 0) rotate(-3.5deg); } 84% { transform: translate(0, 0) rotate(4.5deg); } 86% { transform: translate(0, 0) rotate(-0.5deg); } 88% { transform: translate(0, 0) rotate(-1.5deg); } 90% { transform: translate(0, 0) rotate(-3.5deg); } 92% { transform: translate(0, 0) rotate(2.5deg); } 94% { transform: translate(0, 0) rotate(-3.5deg); } 96% { transform: translate(0, 0) rotate(5.5deg); } 98% { transform: translate(0, 0) rotate(0.5deg); } 0%, 100% { transform: translate(0, 0) rotate(0); } } .shake-rotate:hover, .shake-trigger:hover .shake-rotate, .shake-rotate.shake-freeze, .shake-rotate.shake-constant { animation-name: shake-rotate; animation-duration: 100ms; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes shake-opacity { 10% { transform: translate(-2px, 1px) rotate(-1.5deg); opacity: 0.65; } 20% { transform: translate(-1px, -2px) rotate(-1.5deg); opacity: 0.46; } 30% { transform: translate(-2px, 4px) rotate(1.5deg); opacity: 0.45; } 40% { transform: translate(-2px, -4px) rotate(0.5deg); opacity: 0.43; } 50% { transform: translate(5px, -3px) rotate(-1.5deg); opacity: 0.63; } 60% { transform: translate(0px, -4px) rotate(-1.5deg); opacity: 0.34; } 70% { transform: translate(5px, -1px) rotate(1.5deg); opacity: 0.99; } 80% { transform: translate(-2px, -4px) rotate(0.5deg); opacity: 0.55; } 90% { transform: translate(-3px, -4px) rotate(-1.5deg); opacity: 0.8; } 0%, 100% { transform: translate(0, 0) rotate(0); } } .shake-opacity:hover, .shake-trigger:hover .shake-opacity, .shake-opacity.shake-freeze, .shake-opacity.shake-constant { animation-name: shake-opacity; animation-duration: 0.5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes shake-crazy { 10% { transform: translate(-19px, -8px) rotate(9deg); opacity: 0.39; } 20% { transform: translate(-13px, -7px) rotate(-9deg); opacity: 0.78; } 30% { transform: translate(-15px, -17px) rotate(-8deg); opacity: 0.81; } 40% { transform: translate(11px, 18px) rotate(-3deg); opacity: 0.03; } 50% { transform: translate(2px, 10px) rotate(6deg); opacity: 0.77; } 60% { transform: translate(9px, 2px) rotate(-5deg); opacity: 0.31; } 70% { transform: translate(-15px, -3px) rotate(7deg); opacity: 0.47; } 80% { transform: translate(13px, -5px) rotate(5deg); opacity: 0.75; } 90% { transform: translate(1px, -19px) rotate(-2deg); opacity: 0.27; } 0%, 100% { transform: translate(0, 0) rotate(0); } } .shake-crazy:hover, .shake-trigger:hover .shake-crazy, .shake-crazy.shake-freeze, .shake-crazy.shake-constant { animation-name: shake-crazy; animation-duration: 100ms; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes shake-chunk { 2% { transform: translate(-12px, -2px) rotate(-5deg); } 4% { transform: translate(14px, 10px) rotate(15deg); } 6% { transform: translate(6px, -7px) rotate(14deg); } 8% { transform: translate(1px, 11px) rotate(-3deg); } 10% { transform: translate(-2px, 5px) rotate(-14deg); } 12% { transform: translate(-2px, 9px) rotate(-5deg); } 14% { transform: translate(13px, 12px) rotate(13deg); } 16% { transform: translate(-7px, 14px) rotate(0deg); } 18% { transform: translate(-14px, -13px) rotate(-11deg); } 20% { transform: translate(-6px, 12px) rotate(4deg); } 22% { transform: translate(-9px, 13px) rotate(15deg); } 24% { transform: translate(2px, -13px) rotate(7deg); } 26% { transform: translate(4px, -10px) rotate(-5deg); } 28% { transform: translate(-6px, -6px) rotate(-8deg); } 30% { transform: translate(12px, 13px) rotate(5deg); } 32% { transform: translate(-4px, -13px) rotate(-10deg); } 34% { transform: translate(-5px, 4px) rotate(-7deg); } 36% { transform: translate(3px, -14px) rotate(-6deg); } 38% { transform: translate(-9px, -11px) rotate(8deg); } 0%, 40%, 100% { transform: translate(0, 0) rotate(0); } } .shake-chunk:hover, .shake-trigger:hover .shake-chunk, .shake-chunk.shake-freeze, .shake-chunk.shake-constant { animation-name: shake-chunk; animation-duration: 4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } /*# sourceMappingURL=csshake.css.map */ /* Vivify version: 1.0 Licensed under the MIT license - http://opensource.org/licenses/MIT The MIT License Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ /* Copyright (c) 2017 Martin Knize. */ .vivify { -webkit-animation-duration: .8s; -webkit-animation-fill-mode: both; animation-duration: .8s; animation-fill-mode: both; } .infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .pulsate { -webkit-animation-name: pulsate; animation-name: pulsate; -webkit-transform-origin: center; transform-origin: center; } @keyframes pulsate { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(0.8, 0.8, 0.8); transform: scale3d(0.8, 0.8, 0.8); } 100% { -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .blink { -webkit-animation-name: blink; animation-name: blink; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-animation-duration: 1s; animation-duration: 1s; } @keyframes blink { 0% { opacity: 1; } 25% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 1; } } .hitLeft { -webkit-animation-name: hitLeft; animation-name: hitLeft; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes hitLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: translateX(0); transform: translateX(0); } 40% { -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: translateX(20px) rotate(4deg); transform: translateX(20px) rotate(4deg); } } .hitRight { -webkit-animation-name: hitRight; animation-name: hitRight; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes hitRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: translateX(0); transform: translateX(0); } 40% { -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: translateX(-20px) rotate(-4deg); transform: translateX(-20px) rotate(-4deg); } } .shake { -webkit-animation-name: shake; animation-name: shake; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); } @keyframes shake { 10% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20% { -webkit-transform: translateX(10px); transform: translateX(10px); } 30% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 40% { -webkit-transform: translateX(10px); transform: translateX(10px); } 50% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 60% { -webkit-transform: translateX(10px); transform: translateX(10px); } 70% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } } .ball { -webkit-animation-name: ball; animation-name: ball; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes ball { 0% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 20% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0); } 40% { -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 75% { -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 85% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .pullUp { -webkit-animation-name: pullUp; animation-name: pullUp; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes pullUp { 0% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 30% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scale3d(1, 0, 1); transform: scale3d(1, 0, 1); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 100% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pullDown { -webkit-animation-name: pullDown; animation-name: pullDown; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes pullDown { 0% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 50% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scale3d(1, 0, 1); transform: scale3d(1, 0, 1); -webkit-transform-origin: center top; transform-origin: center top; } 100% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pullLeft { -webkit-animation-name: pullLeft; animation-name: pullLeft; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes pullLeft { 0% { -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); } 50% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); -webkit-transform-origin: center left; transform-origin: center left; } 100% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pullRight { -webkit-animation-name: pullRight; animation-name: pullRight; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes pullRight { 0% { -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); } 50% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); -webkit-transform-origin: center right; transform-origin: center right; } 100% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .jumpInLeft { -webkit-animation-name: jumpInLeft; animation-name: jumpInLeft; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes jumpInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg); transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg); } 50% { opacity: 1; -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(10deg); transform: scale3d(1.2, 1.2, 1.2) rotate(10deg); } 70% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg); } 90% { -webkit-transform: scale3d(1, 1, 1) rotate(0deg); transform: scale3d(1, 1, 1) rotate(0deg); } } .jumpInRight { -webkit-animation-name: jumpInRight; animation-name: jumpInRight; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes jumpInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(90deg); transform: scale3d(0.5, 0.5, 0.5) rotate(90deg); } 50% { opacity: 1; -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg); transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg); } 70% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(5deg); transform: scale3d(0.9, 0.9, 0.9) rotate(5deg); } 90% { -webkit-transform: scale3d(1, 1, 1) rotate(0deg); transform: scale3d(1, 1, 1) rotate(0deg); } } .jumpOutRight { -webkit-animation-name: jumpOutRight; animation-name: jumpOutRight; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes jumpOutRight { 0% { -webkit-transform: scale3d(1, 1, 1) rotate(0deg); transform: scale3d(1, 1, 1) rotate(0deg); } 30% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(5deg); transform: scale3d(0.9, 0.9, 0.9) rotate(5deg); } 70% { opacity: 1; -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg); transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg); } 100% { opacity: 0; -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(90deg); transform: scale3d(0.5, 0.5, 0.5) rotate(90deg); } } .jumpOutLeft { -webkit-animation-name: jumpOutLeft; animation-name: jumpOutLeft; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes jumpOutLeft { 0% { -webkit-transform: scale3d(1, 1, 1) rotate(0deg); transform: scale3d(1, 1, 1) rotate(0deg); } 30% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg); } 70% { opacity: 1; -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(10deg); transform: scale3d(1.2, 1.2, 1.2) rotate(10deg); } 100% { opacity: 0; -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg); transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg); } } .rollInLeft { -webkit-animation-name: rollInLeft; animation-name: rollInLeft; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollInLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateX(-400px) rotate(445deg); transform: translateX(-400px) rotate(445deg); opacity: 0; } 30% { opacity: 1; } 50% { -webkit-transform: translateX(20px) rotate(20deg); transform: translateX(20px) rotate(20deg); } 100% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); } } .rollInRight { -webkit-animation-name: rollInRight; animation-name: rollInRight; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollInRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateX(400px) rotate(-445deg); transform: translateX(400px) rotate(-445deg); opacity: 0; } 30% { opacity: 1; } 50% { -webkit-transform: translateX(-20px) rotate(-20deg); transform: translateX(-20px) rotate(-20deg); } 100% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); } } .rollInTop { -webkit-animation-name: rollInTop; animation-name: rollInTop; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollInTop { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateY(-400px) rotate(-445deg); transform: translateY(-400px) rotate(-445deg); opacity: 0; } 30% { opacity: 1; } 50% { -webkit-transform: translateY(20px) rotate(-20deg); transform: translateY(20px) rotate(-20deg); } 100% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } } .rollInBottom { -webkit-animation-name: rollInBottom; animation-name: rollInBottom; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollInBottom { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateY(400px) rotate(-445deg); transform: translateY(400px) rotate(-445deg); opacity: 0; } 30% { opacity: 1; } 50% { -webkit-transform: translateY(-20px) rotate(-20deg); transform: translateY(-20px) rotate(-20deg); } 100% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } } .rollOutLeft { -webkit-animation-name: rollOutLeft; animation-name: rollOutLeft; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollOutLeft { 0% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); } 40% { opacity: 1; -webkit-transform: translateX(20px) rotate(-20deg); transform: translateX(20px) rotate(-20deg); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateX(-400px) rotate(-445deg); transform: translateX(-400px) rotate(-445deg); } } .rollOutRight { -webkit-animation-name: rollOutRight; animation-name: rollOutRight; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollOutRight { 0% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); } 40% { opacity: 1; -webkit-transform: translateX(-20px) rotate(20deg); transform: translateX(-20px) rotate(20deg); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateX(400px) rotate(445deg); transform: translateX(400px) rotate(445deg); } } .rollOutTop { -webkit-animation-name: rollOutTop; animation-name: rollOutTop; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollOutTop { 0% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } 40% { opacity: 1; -webkit-transform: translateY(20px) rotate(20deg); transform: translateY(20px) rotate(20deg); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateY(-400px) rotate(445deg); transform: translateY(-400px) rotate(445deg); } } .rollOutBottom { -webkit-animation-name: rollOutBottom; animation-name: rollOutBottom; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollOutBottom { 0% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } 40% { opacity: 1; -webkit-transform: translateY(-20px) rotate(-20deg); transform: translateY(-20px) rotate(-20deg); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateY(400px) rotate(-445deg); transform: translateY(400px) rotate(-445deg); } } .popIn { -webkit-animation-name: popIn; animation-name: popIn; -webkit-animation-duration: 1s; animation-duration: 1s; } @keyframes popIn { 0% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); opacity: 0; } 20% { opacity: 1; } 40% { -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: scale3d(1.08, 1.08, 1.08); transform: scale3d(1.08, 1.08, 1.08); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .popInLeft { -webkit-animation-name: popInLeft; animation-name: popInLeft; -webkit-animation-duration: 1s; animation-duration: 1s; } @keyframes popInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-200px, 0, 0) scale3d(0.1, 0.1, 0.1); transform: translate3d(-200px, 0, 0) scale3d(0.1, 0.1, 0.1); } 40% { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .popInRight { -webkit-animation-name: popInRight; animation-name: popInRight; -webkit-animation-duration: 1s; animation-duration: 1s; } @keyframes popInRight { 0% { -webkit-transform: translate3d(200px, 0, 0) scale3d(0.1, 0.1, 0.1); transform: translate3d(200px, 0, 0) scale3d(0.1, 0.1, 0.1); opacity: 0; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .popInTop { -webkit-animation-name: popInTop; animation-name: popInTop; -webkit-animation-duration: 1s; animation-duration: 1s; } @keyframes popInTop { 0% { -webkit-transform: translate3d(0, -200px, 0) scale3d(0.1, 0.1, 0.1); transform: translate3d(0, -200px, 0) scale3d(0.1, 0.1, 0.1); opacity: 0; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03); transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } .popInBottom { -webkit-animation-name: popInBottom; animation-name: popInBottom; -webkit-animation-duration: 1s; animation-duration: 1s; } @keyframes popInBottom { 0% { -webkit-transform: translate3d(0, 200px, 0) scale3d(0.1, 0.1, 0.1); transform: translate3d(0, 200px, 0) scale3d(0.1, 0.1, 0.1); opacity: 0; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03); transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } .popOut { -webkit-animation-name: popOut; animation-name: popOut; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes popOut { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.08, 1.08, 1.08); transform: scale3d(1.08, 1.08, 1.08); } 80% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .popOutLeft { -webkit-animation-name: popOutLeft; animation-name: popOutLeft; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes popOutLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(-200px, 0, 0); transform: scale3d(0.5, 0.5, 0.5) translate3d(-200px, 0, 0); } } .popOutRight { -webkit-animation-name: popOutRight; animation-name: popOutRight; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes popOutRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(200px, 0, 0); transform: scale3d(0.5, 0.5, 0.5) translate3d(200px, 0, 0); } } .popOutTop { -webkit-animation-name: popOutTop; animation-name: popOutTop; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes popOutTop { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); -webkit-transform-origin: top center; transform-origin: top center; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -400px, 0); transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -400px, 0); } } .popOutBottom { -webkit-animation-name: popOutBottom; animation-name: popOutBottom; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes popOutBottom { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); -webkit-transform-origin: bottom center; transform-origin: bottom center; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 400px, 0); transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 400px, 0); } } .flip { -webkit-animation-name: flip; animation-name: flip; } @keyframes flip { from { -webkit-transform: perspective(400px) rotateY(-360deg) scale3d(1, 1, 1); transform: perspective(400px) rotateY(-360deg) scale3d(1, 1, 1); -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } 50% { -webkit-transform: perspective(400px) rotateY(-180deg) scale3d(1.2, 1.2, 1.2); transform: perspective(400px) rotateY(-180deg) scale3d(1.2, 1.2, 1.2); -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } to { -webkit-transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); -webkit-animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); } } .flipInX { -webkit-animation-name: flipInX; animation-name: flipInX; -webkit-animation-duration: 1s; animation-duration: 1s; } @keyframes flipInX { from { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2); transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2); } 50% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: perspective(400px) rotateX(-20deg) scale3d(1, 1, 1); transform: perspective(400px) rotateX(-20deg) scale3d(1, 1, 1); } to { -webkit-transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1); transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1); } } .flipInY { -webkit-animation-name: flipInY; animation-name: flipInY; -webkit-animation-duration: 1s; animation-duration: 1s; } @keyframes flipInY { from { opacity: 0; -webkit-transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2); transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2); } 50% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: perspective(400px) rotateY(-20deg) scale3d(1, 1, 1); transform: perspective(400px) rotateY(-20deg) scale3d(1, 1, 1); } to { -webkit-transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; } @keyframes flipOutX { from { -webkit-transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1); transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1); } 60% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: perspective(400px) rotateX(-30deg) scale3d(1, 1, 1); transform: perspective(400px) rotateX(-30deg) scale3d(1, 1, 1); } to { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2); transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2); } } .flipOutY { -webkit-animation-name: flipOutY; animation-name: flipOutY; } @keyframes flipOutY { from { -webkit-transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); } 60% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: perspective(400px) rotateY(-30deg) scale3d(1, 1, 1); transform: perspective(400px) rotateY(-30deg) scale3d(1, 1, 1); } to { opacity: 0; -webkit-transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2); transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2); } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeInRight { 0% { -webkit-transform: translate3d(400px, 0, 0); transform: translate3d(400px, 0, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeInLeft { 0% { -webkit-transform: translate3d(-400px, 0, 0); transform: translate3d(-400px, 0, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .fadeInTop { -webkit-animation-name: fadeInTop; animation-name: fadeInTop; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeInTop { 0% { -webkit-transform: translate3d(0, -400px, 0); transform: translate3d(0, -400px, 0); opacity: 0; } 50% { opacity: 0.2; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .fadeInBottom { -webkit-animation-name: fadeInBottom; animation-name: fadeInBottom; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeInBottom { 0% { -webkit-transform: translate3d(0, 400px, 0); transform: translate3d(0, 400px, 0); opacity: 0; } 50% { opacity: 0.2; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeOutLeft { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 100% { -webkit-transform: translate3d(-400px, 0, 0); transform: translate3d(-400px, 0, 0); opacity: 0; } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeOutRight { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 100% { -webkit-transform: translate3d(400px, 0, 0); transform: translate3d(400px, 0, 0); opacity: 0; } } .fadeOutTop { -webkit-animation-name: fadeOutTop; animation-name: fadeOutTop; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeOutTop { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 40% { opacity: 0.2; } 100% { -webkit-transform: translate3d(0, -300px, 0); transform: translate3d(0, -300px, 0); opacity: 0; } } .fadeOutBottom { -webkit-animation-name: fadeOutBottom; animation-name: fadeOutBottom; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeOutBottom { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 40% { opacity: 0.2; } 100% { -webkit-transform: translate3d(0, 300px, 0); transform: translate3d(0, 300px, 0); opacity: 0; } } .driveInLeft { -webkit-animation-name: driveInLeft; animation-name: driveInLeft; -webkit-animation-duration: 1s; animation-duration: 1s; } @keyframes driveInLeft { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(-400px, 0, 0); transform: translate3d(-400px, 0, 0); } 30% { opacity: 1; } 60% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .driveInRight { -webkit-animation-name: driveInRight; animation-name: driveInRight; -webkit-animation-duration: 1s; animation-duration: 1s; } @keyframes driveInRight { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(400px, 0, 0); transform: translate3d(400px, 0, 0); } 30% { opacity: 1; } 60% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .driveInTop { -webkit-animation-name: driveInTop; animation-name: driveInTop; -webkit-animation-duration: 1s; animation-duration: 1s; } @keyframes driveInTop { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, -400px, 0); transform: translate3d(0, -400px, 0); } 30% { opacity: 1; } 60% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .driveInBottom { -webkit-animation-name: driveInBottom; animation-name: driveInBottom; -webkit-animation-duration: 1s; animation-duration: 1s; } @keyframes driveInBottom { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, 300px, 0); transform: translate3d(0, 300px, 0); } 30% { opacity: 1; } 60% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .driveOutLeft { -webkit-animation-name: driveOutLeft; animation-name: driveOutLeft; -webkit-animation-duration: 1s; animation-duration: 1s; } @keyframes driveOutLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 30% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0); } 60% { opacity: 1; } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(-400px, 0, 0); transform: translate3d(-400px, 0, 0); } } .driveOutRight { -webkit-animation-name: driveOutRight; animation-name: driveOutRight; -webkit-animation-duration: 1s; animation-duration: 1s; } @keyframes driveOutRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 30% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); } 60% { opacity: 1; } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(400px, 0, 0); transform: translate3d(400px, 0, 0); } } .driveOutTop { -webkit-animation-name: driveOutTop; animation-name: driveOutTop; -webkit-animation-duration: 1s; animation-duration: 1s; } @keyframes driveOutTop { 0% { -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 30% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); } 60% { opacity: 1; } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, -400px, 0); transform: translate3d(0, -400px, 0); } } .driveOutBottom { -webkit-animation-name: driveOutBottom; animation-name: driveOutBottom; -webkit-animation-duration: 1s; animation-duration: 1s; } @keyframes driveOutBottom { 0% { -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 30% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 60% { opacity: 1; } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, 300px, 0); transform: translate3d(0, 300px, 0); } } .spin { -webkit-animation-name: spin; animation-name: spin; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; } @keyframes spin { 0% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-transform-origin: center center; transform-origin: center center; } 20% { -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: rotateZ(-20deg); transform: rotateZ(-20deg); -webkit-transform-origin: center center; transform-origin: center center; } 70% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: rotateZ(380deg); transform: rotateZ(380deg); -webkit-transform-origin: center center; transform-origin: center center; } 100% { -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); -webkit-transform-origin: center center; transform-origin: center center; } } .spinIn { -webkit-animation-name: spinIn; animation-name: spinIn; -webkit-animation-duration: 1s; animation-duration: 1s; } @keyframes spinIn { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: rotateZ(0deg) scale3d(0, 0, 0); transform: rotateZ(0deg) scale3d(0, 0, 0); -webkit-transform-origin: center center; transform-origin: center center; } 50% { opacity: 1; } 70% { -webkit-transform: rotateZ(380deg) scale3d(1, 1, 1); transform: rotateZ(380deg) scale3d(1, 1, 1); -webkit-transform-origin: center center; transform-origin: center center; } 100% { -webkit-transform: rotateZ(360deg) scale3d(1, 1, 1); transform: rotateZ(360deg) scale3d(1, 1, 1); -webkit-transform-origin: center center; transform-origin: center center; } } .spinOut { -webkit-animation-name: spinOut; animation-name: spinOut; -webkit-animation-duration: 1s; animation-duration: 1s; } @keyframes spinOut { 0% { -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: rotateZ(0deg) scale3d(1, 1, 1); transform: rotateZ(0deg) scale3d(1, 1, 1); -webkit-transform-origin: center center; transform-origin: center center; } 20% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: rotateZ(-20deg) scale3d(1, 1, 1); transform: rotateZ(-20deg) scale3d(1, 1, 1); -webkit-transform-origin: center center; transform-origin: center center; } 30% { opacity: 1; } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: rotateZ(360deg) scale3d(0, 0, 0); transform: rotateZ(360deg) scale3d(0, 0, 0); -webkit-transform-origin: center center; transform-origin: center center; } } .swoopInLeft { -webkit-animation-name: swoopInLeft; animation-name: swoopInLeft; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopInLeft { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleX(1.5) translate3d(-400px, 0, 0); transform: scaleX(1.5) translate3d(-400px, 0, 0); } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1.2) translate3d(0, 0, 0); transform: scaleX(1.2) translate3d(0, 0, 0); } 65% { -webkit-transform: scaleX(1) translate3d(20px, 0, 0); transform: scaleX(1) translate3d(20px, 0, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1) translate3d(0, 0, 0); transform: scaleX(1) translate3d(0, 0, 0); } } .swoopInRight { -webkit-animation-name: swoopInRight; animation-name: swoopInRight; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopInRight { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleX(1.5) translate3d(400px, 0, 0); transform: scaleX(1.5) translate3d(400px, 0, 0); } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1.2) translate3d(0, 0, 0); transform: scaleX(1.2) translate3d(0, 0, 0); } 65% { -webkit-transform: scaleX(1) translate3d(-20px, 0, 0); transform: scaleX(1) translate3d(-20px, 0, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1) translate3d(0, 0, 0); transform: scaleX(1) translate3d(0, 0, 0); } } .swoopInTop { -webkit-animation-name: swoopInTop; animation-name: swoopInTop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopInTop { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleY(1.5) translate3d(0, -400px, 0); transform: scaleY(1.5) translate3d(0, -400px, 0); } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1.2) translate3d(0, 0, 0); transform: scaleY(1.2) translate3d(0, 0, 0); } 65% { -webkit-transform: scaleY(1) translate3d(0, 20px, 0); transform: scaleY(1) translate3d(0, 20px, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1) translate3d(0, 0, 0); transform: scaleY(1) translate3d(0, 0, 0); } } .swoopInBottom { -webkit-animation-name: swoopInBottom; animation-name: swoopInBottom; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopInBottom { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleY(1.5) translate3d(0, 250px, 0); transform: scaleY(1.5) translate3d(0, 250px, 0); } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1.2) translate3d(0, 0, 0); transform: scaleY(1.2) translate3d(0, 0, 0); } 65% { -webkit-transform: scaleY(1) translate3d(0, -20px, 0); transform: scaleY(1) translate3d(0, -20px, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1) translate3d(0, 0, 0); transform: scaleY(1) translate3d(0, 0, 0); } } .swoopOutLeft { -webkit-animation-name: swoopOutLeft; animation-name: swoopOutLeft; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopOutLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1) translate3d(0, 0, 0); transform: scaleX(1) translate3d(0, 0, 0); } 40% { opacity: 1; -webkit-transform: scaleX(1) translate3d(20px, 0, 0); transform: scaleX(1) translate3d(20px, 0, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1.2) translate3d(0, 0, 0); transform: scaleX(1.2) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleX(1.5) translate3d(-400px, 0, 0); transform: scaleX(1.5) translate3d(-400px, 0, 0); } } .swoopOutRight { -webkit-animation-name: swoopOutRight; animation-name: swoopOutRight; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopOutRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1) translate3d(0, 0, 0); transform: scaleX(1) translate3d(0, 0, 0); } 40% { opacity: 1; -webkit-transform: scaleX(1) translate3d(-20px, 0, 0); transform: scaleX(1) translate3d(-20px, 0, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1.2) translate3d(0, 0, 0); transform: scaleX(1.2) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleX(1.5) translate3d(400px, 0, 0); transform: scaleX(1.5) translate3d(400px, 0, 0); } } .swoopOutTop { -webkit-animation-name: swoopOutTop; animation-name: swoopOutTop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopOutTop { 0% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1) translate3d(0, 0, 0); transform: scaleY(1) translate3d(0, 0, 0); } 40% { opacity: 1; -webkit-transform: scaleY(1) translate3d(0, 20px, 0); transform: scaleY(1) translate3d(0, 20px, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1.2) translate3d(0, 0, 0); transform: scaleY(1.2) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleY(1.5) translate3d(0, -400px, 0); transform: scaleY(1.5) translate3d(0, -400px, 0); } } .swoopOutBottom { -webkit-animation-name: swoopOutBottom; animation-name: swoopOutBottom; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopOutBottom { 0% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1) translate3d(0, 0, 0); transform: scaleY(1) translate3d(0, 0, 0); } 40% { opacity: 1; -webkit-transform: scaleY(1) translate3d(0, -20px, 0); transform: scaleY(1) translate3d(0, -20px, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1.2) translate3d(0, 0, 0); transform: scaleY(1.2) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleY(1.5) translate3d(0, 200px, 0); transform: scaleY(1.5) translate3d(0, 200px, 0); } } .fold { -webkit-animation-name: fold; animation-name: fold; } @keyframes fold { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: scale3d(1, 0.4, 1); transform: scale3d(1, 0.4, 1); } 60% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: scale3d(0.4, 0.4, 1); transform: scale3d(0.4, 0.4, 1); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); -webkit-transform: scale3d(0.2, 0.2, 0.2); transform: scale3d(0.2, 0.2, 0.2); } } .unfold { -webkit-animation-name: unfold; animation-name: unfold; } @keyframes unfold { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 30% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: scale3d(0.4, 0.4, 1); transform: scale3d(0.4, 0.4, 1); } 60% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: scale3d(0.4, 1, 1); transform: scale3d(0.4, 1, 1); } 100% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .delay-100 { -webkit-animation-delay: .1s; animation-delay: .1s; } .delay-150 { -webkit-animation-delay: 150ms; animation-delay: 150ms; } .duration-100 { -webkit-animation-duration: .1s; animation-duration: .1s; } .duration-150 { -webkit-animation-duration: 150ms; animation-duration: 150ms; } .delay-200 { -webkit-animation-delay: .2s; animation-delay: .2s; } .delay-250 { -webkit-animation-delay: 250ms; animation-delay: 250ms; } .duration-200 { -webkit-animation-duration: .2s; animation-duration: .2s; } .duration-250 { -webkit-animation-duration: 250ms; animation-duration: 250ms; } .delay-300 { -webkit-animation-delay: .3s; animation-delay: .3s; } .delay-350 { -webkit-animation-delay: 350ms; animation-delay: 350ms; } .duration-300 { -webkit-animation-duration: .3s; animation-duration: .3s; } .duration-350 { -webkit-animation-duration: 350ms; animation-duration: 350ms; } .delay-400 { -webkit-animation-delay: .4s; animation-delay: .4s; } .delay-450 { -webkit-animation-delay: 450ms; animation-delay: 450ms; } .duration-400 { -webkit-animation-duration: .4s; animation-duration: .4s; } .duration-450 { -webkit-animation-duration: 450ms; animation-duration: 450ms; } .delay-500 { -webkit-animation-delay: .5s; animation-delay: .5s; } .delay-550 { -webkit-animation-delay: 550ms; animation-delay: 550ms; } .duration-500 { -webkit-animation-duration: .5s; animation-duration: .5s; } .duration-550 { -webkit-animation-duration: 550ms; animation-duration: 550ms; } .delay-600 { -webkit-animation-delay: .6s; animation-delay: .6s; } .delay-650 { -webkit-animation-delay: 650ms; animation-delay: 650ms; } .duration-600 { -webkit-animation-duration: .6s; animation-duration: .6s; } .duration-650 { -webkit-animation-duration: 650ms; animation-duration: 650ms; } .delay-700 { -webkit-animation-delay: .7s; animation-delay: .7s; } .delay-750 { -webkit-animation-delay: 750ms; animation-delay: 750ms; } .duration-700 { -webkit-animation-duration: .7s; animation-duration: .7s; } .duration-750 { -webkit-animation-duration: 750ms; animation-duration: 750ms; } .delay-800 { -webkit-animation-delay: .8s; animation-delay: .8s; } .delay-850 { -webkit-animation-delay: 850ms; animation-delay: 850ms; } .duration-800 { -webkit-animation-duration: .8s; animation-duration: .8s; } .duration-850 { -webkit-animation-duration: 850ms; animation-duration: 850ms; } .delay-900 { -webkit-animation-delay: .9s; animation-delay: .9s; } .delay-950 { -webkit-animation-delay: 950ms; animation-delay: 950ms; } .duration-900 { -webkit-animation-duration: .9s; animation-duration: .9s; } .duration-950 { -webkit-animation-duration: 950ms; animation-duration: 950ms; } .delay-1000 { -webkit-animation-delay: 1s; animation-delay: 1s; } .delay-1250 { -webkit-animation-delay: 1250ms; animation-delay: 1250ms; } .delay-1500 { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .delay-1750 { -webkit-animation-delay: 1750ms; animation-delay: 1750ms; } .duration-1000 { -webkit-animation-duration: 1s; animation-duration: 1s; } .duration-1250 { -webkit-animation-duration: 1250ms; animation-duration: 1250ms; } .duration-1500 { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } .duration-1750 { -webkit-animation-duration: 1750ms; animation-duration: 1750ms; } .delay-2000 { -webkit-animation-delay: 2s; animation-delay: 2s; } .delay-2250 { -webkit-animation-delay: 2250ms; animation-delay: 2250ms; } .delay-2500 { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } .delay-2750 { -webkit-animation-delay: 2750ms; animation-delay: 2750ms; } .duration-2000 { -webkit-animation-duration: 2s; animation-duration: 2s; } .duration-2250 { -webkit-animation-duration: 2250ms; animation-duration: 2250ms; } .duration-2500 { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; } .duration-2750 { -webkit-animation-duration: 2750ms; animation-duration: 2750ms; } .delay-3000 { -webkit-animation-delay: 3s; animation-delay: 3s; } .delay-3250 { -webkit-animation-delay: 3250ms; animation-delay: 3250ms; } .delay-3500 { -webkit-animation-delay: 3.5s; animation-delay: 3.5s; } .delay-3750 { -webkit-animation-delay: 3750ms; animation-delay: 3750ms; } .duration-3000 { -webkit-animation-duration: 3s; animation-duration: 3s; } .duration-3250 { -webkit-animation-duration: 3250ms; animation-duration: 3250ms; } .duration-3500 { -webkit-animation-duration: 3.5s; animation-duration: 3.5s; } .duration-3750 { -webkit-animation-duration: 3750ms; animation-duration: 3750ms; } .delay-4000 { -webkit-animation-delay: 4s; animation-delay: 4s; } .delay-4250 { -webkit-animation-delay: 4250ms; animation-delay: 4250ms; } .delay-4500 { -webkit-animation-delay: 4.5s; animation-delay: 4.5s; } .delay-4750 { -webkit-animation-delay: 4750ms; animation-delay: 4750ms; } .duration-4000 { -webkit-animation-duration: 4s; animation-duration: 4s; } .duration-4250 { -webkit-animation-duration: 4250ms; animation-duration: 4250ms; } .duration-4500 { -webkit-animation-duration: 4.5s; animation-duration: 4.5s; } .duration-4750 { -webkit-animation-duration: 4750ms; animation-duration: 4750ms; } .delay-5000 { -webkit-animation-delay: 5s; animation-delay: 5s; } .delay-5250 { -webkit-animation-delay: 5250ms; animation-delay: 5250ms; } .delay-5500 { -webkit-animation-delay: 5.5s; animation-delay: 5.5s; } .delay-5750 { -webkit-animation-delay: 5750ms; animation-delay: 5750ms; } .duration-5000 { -webkit-animation-duration: 5s; animation-duration: 5s; } .duration-5250 { -webkit-animation-duration: 5250ms; animation-duration: 5250ms; } .duration-5500 { -webkit-animation-duration: 5.5s; animation-duration: 5.5s; } .duration-5750 { -webkit-animation-duration: 5750ms; animation-duration: 5750ms; } .duration-6000 { -webkit-animation-duration: 6s; animation-duration: 6s; } .duration-6250 { -webkit-animation-duration: 6250ms; animation-duration: 6250ms; } .duration-6500 { -webkit-animation-duration: 6.5s; animation-duration: 6.5s; } .duration-6750 { -webkit-animation-duration: 6750ms; animation-duration: 6750ms; } .duration-7000 { -webkit-animation-duration: 7s; animation-duration: 7s; } .duration-7250 { -webkit-animation-duration: 7250ms; animation-duration: 7250ms; } .duration-7500 { -webkit-animation-duration: 7.5s; animation-duration: 7.5s; } .duration-7750 { -webkit-animation-duration: 7750ms; animation-duration: 7750ms; } .duration-8000 { -webkit-animation-duration: 8s; animation-duration: 8s; } .duration-8250 { -webkit-animation-duration: 8250ms; animation-duration: 8250ms; } .duration-8500 { -webkit-animation-duration: 8.5s; animation-duration: 8.5s; } .duration-8750 { -webkit-animation-duration: 8750ms; animation-duration: 8750ms; } .duration-9000 { -webkit-animation-duration: 9s; animation-duration: 9s; } .duration-9250 { -webkit-animation-duration: 9250ms; animation-duration: 9250ms; } .duration-9500 { -webkit-animation-duration: 9.5s; animation-duration: 9.5s; } .duration-9750 { -webkit-animation-duration: 9750ms; animation-duration: 9750ms; } .duration-10000 { -webkit-animation-duration: 10s; animation-duration: 10s; } .duration-10250 { -webkit-animation-duration: 10250ms; animation-duration: 10250ms; } .duration-10500 { -webkit-animation-duration: 10.5s; animation-duration: 10.5s; } .duration-10750 { -webkit-animation-duration: 10750ms; animation-duration: 10750ms; } /*# sourceMappingURL=vivify.css.map */ /* Config */ :root { --sk-size: 40px; --sk-color: #333; } /* Utility class for centering */ .sk-center { margin: auto; } /* Plane
*/ .sk-plane { width: var(--sk-size); height: var(--sk-size); background-color: var(--sk-color); animation: sk-plane 1.2s infinite ease-in-out; } @keyframes sk-plane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } /* Chase
*/ .sk-chase { width: var(--sk-size); height: var(--sk-size); position: relative; animation: sk-chase 2.5s infinite linear both; } .sk-chase-dot { width: 100%; height: 100%; position: absolute; left: 0; top: 0; animation: sk-chase-dot 2.0s infinite ease-in-out both; } .sk-chase-dot:before { content: ''; display: block; width: 25%; height: 25%; background-color: var(--sk-color); border-radius: 100%; animation: sk-chase-dot-before 2.0s infinite ease-in-out both; } .sk-chase-dot:nth-child(1) { animation-delay: -1.1s; } .sk-chase-dot:nth-child(2) { animation-delay: -1.0s; } .sk-chase-dot:nth-child(3) { animation-delay: -0.9s; } .sk-chase-dot:nth-child(4) { animation-delay: -0.8s; } .sk-chase-dot:nth-child(5) { animation-delay: -0.7s; } .sk-chase-dot:nth-child(6) { animation-delay: -0.6s; } .sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; } .sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; } .sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; } .sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; } .sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; } .sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; } @keyframes sk-chase { 100% { transform: rotate(360deg); } } @keyframes sk-chase-dot { 80%, 100% { transform: rotate(360deg); } } @keyframes sk-chase-dot-before { 50% { transform: scale(0.4); } 100%, 0% { transform: scale(1.0); } } /* Bounce
*/ .sk-bounce { width: var(--sk-size); height: var(--sk-size); position: relative; } .sk-bounce-dot { width: 100%; height: 100%; border-radius: 50%; background-color: var(--sk-color); opacity: 0.6; position: absolute; top: 0; left: 0; animation: sk-bounce 2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); } .sk-bounce-dot:nth-child(2) { animation-delay: -1.0s; } @keyframes sk-bounce { 0%, 100% { transform: scale(0); } 45%, 55% { transform: scale(1); } } /* Wave
*/ .sk-wave { width: var(--sk-size); height: var(--sk-size); display: flex; justify-content: space-between; } .sk-wave-rect { background-color: var(--sk-color); height: 100%; width: 15%; animation: sk-wave 1.2s infinite ease-in-out; } .sk-wave-rect:nth-child(1) { animation-delay: -1.2s; } .sk-wave-rect:nth-child(2) { animation-delay: -1.1s; } .sk-wave-rect:nth-child(3) { animation-delay: -1.0s; } .sk-wave-rect:nth-child(4) { animation-delay: -0.9s; } .sk-wave-rect:nth-child(5) { animation-delay: -0.8s; } @keyframes sk-wave { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); } } /* Pulse
*/ .sk-pulse { width: var(--sk-size); height: var(--sk-size); background-color: var(--sk-color); border-radius: 100%; animation: sk-pulse 1.2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes sk-pulse { 0% { transform: scale(0); } 100% { transform: scale(1); opacity: 0; } } /* Flow
*/ .sk-flow { width: calc(var(--sk-size) * 1.3); height: calc(var(--sk-size) * 1.3); display: flex; justify-content: space-between; } .sk-flow-dot { width: 25%; height: 25%; background-color: var(--sk-color); border-radius: 50%; animation: sk-flow 1.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s infinite both; } .sk-flow-dot:nth-child(1) { animation-delay: -0.30s; } .sk-flow-dot:nth-child(2) { animation-delay: -0.15s; } @keyframes sk-flow { 0%, 80%, 100% { transform: scale(0.3); } 40% { transform: scale(1); } } /* Swing
*/ .sk-swing { width: var(--sk-size); height: var(--sk-size); position: relative; animation: sk-swing 1.8s infinite linear; } .sk-swing-dot { width: 45%; height: 45%; position: absolute; top: 0; left: 0; right: 0; margin: auto; background-color: var(--sk-color); border-radius: 100%; animation: sk-swing-dot 2s infinite ease-in-out; } .sk-swing-dot:nth-child(2) { top: auto; bottom: 0; animation-delay: -1s; } @keyframes sk-swing { 100% { transform: rotate(360deg); } } @keyframes sk-swing-dot { 0%, 100% { transform: scale(0.2); } 50% { transform: scale(1); } } /* Circle
*/ .sk-circle { width: var(--sk-size); height: var(--sk-size); position: relative; } .sk-circle-dot { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .sk-circle-dot:before { content: ''; display: block; width: 15%; height: 15%; background-color: var(--sk-color); border-radius: 100%; animation: sk-circle 1.2s infinite ease-in-out both; } .sk-circle-dot:nth-child(1) { transform: rotate(30deg); } .sk-circle-dot:nth-child(2) { transform: rotate(60deg); } .sk-circle-dot:nth-child(3) { transform: rotate(90deg); } .sk-circle-dot:nth-child(4) { transform: rotate(120deg); } .sk-circle-dot:nth-child(5) { transform: rotate(150deg); } .sk-circle-dot:nth-child(6) { transform: rotate(180deg); } .sk-circle-dot:nth-child(7) { transform: rotate(210deg); } .sk-circle-dot:nth-child(8) { transform: rotate(240deg); } .sk-circle-dot:nth-child(9) { transform: rotate(270deg); } .sk-circle-dot:nth-child(10) { transform: rotate(300deg); } .sk-circle-dot:nth-child(11) { transform: rotate(330deg); } .sk-circle-dot:nth-child(1):before { animation-delay: -1.1s; } .sk-circle-dot:nth-child(2):before { animation-delay: -1s; } .sk-circle-dot:nth-child(3):before { animation-delay: -0.9s; } .sk-circle-dot:nth-child(4):before { animation-delay: -0.8s; } .sk-circle-dot:nth-child(5):before { animation-delay: -0.7s; } .sk-circle-dot:nth-child(6):before { animation-delay: -0.6s; } .sk-circle-dot:nth-child(7):before { animation-delay: -0.5s; } .sk-circle-dot:nth-child(8):before { animation-delay: -0.4s; } .sk-circle-dot:nth-child(9):before { animation-delay: -0.3s; } .sk-circle-dot:nth-child(10):before { animation-delay: -0.2s; } .sk-circle-dot:nth-child(11):before { animation-delay: -0.1s; } @keyframes sk-circle { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } /* Circle Fade
*/ .sk-circle-fade { width: var(--sk-size); height: var(--sk-size); position: relative; } .sk-circle-fade-dot { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .sk-circle-fade-dot:before { content: ''; display: block; width: 15%; height: 15%; background-color: var(--sk-color); border-radius: 100%; animation: sk-circle-fade 1.2s infinite ease-in-out both; } .sk-circle-fade-dot:nth-child(1) { transform: rotate(30deg); } .sk-circle-fade-dot:nth-child(2) { transform: rotate(60deg); } .sk-circle-fade-dot:nth-child(3) { transform: rotate(90deg); } .sk-circle-fade-dot:nth-child(4) { transform: rotate(120deg); } .sk-circle-fade-dot:nth-child(5) { transform: rotate(150deg); } .sk-circle-fade-dot:nth-child(6) { transform: rotate(180deg); } .sk-circle-fade-dot:nth-child(7) { transform: rotate(210deg); } .sk-circle-fade-dot:nth-child(8) { transform: rotate(240deg); } .sk-circle-fade-dot:nth-child(9) { transform: rotate(270deg); } .sk-circle-fade-dot:nth-child(10) { transform: rotate(300deg); } .sk-circle-fade-dot:nth-child(11) { transform: rotate(330deg); } .sk-circle-fade-dot:nth-child(1):before { animation-delay: -1.1s; } .sk-circle-fade-dot:nth-child(2):before { animation-delay: -1.0s; } .sk-circle-fade-dot:nth-child(3):before { animation-delay: -0.9s; } .sk-circle-fade-dot:nth-child(4):before { animation-delay: -0.8s; } .sk-circle-fade-dot:nth-child(5):before { animation-delay: -0.7s; } .sk-circle-fade-dot:nth-child(6):before { animation-delay: -0.6s; } .sk-circle-fade-dot:nth-child(7):before { animation-delay: -0.5s; } .sk-circle-fade-dot:nth-child(8):before { animation-delay: -0.4s; } .sk-circle-fade-dot:nth-child(9):before { animation-delay: -0.3s; } .sk-circle-fade-dot:nth-child(10):before { animation-delay: -0.2s; } .sk-circle-fade-dot:nth-child(11):before { animation-delay: -0.1s; } @keyframes sk-circle-fade { 0%, 39%, 100% { opacity: 0; transform: scale(0.6); } 40% { opacity: 1; transform: scale(1); } } /* Grid
*/ .sk-grid { width: var(--sk-size); height: var(--sk-size); /* Cube positions * 1 2 3 * 4 5 6 * 7 8 9 */ } .sk-grid-cube { width: 33.33%; height: 33.33%; background-color: var(--sk-color); float: left; animation: sk-grid 1.3s infinite ease-in-out; } .sk-grid-cube:nth-child(1) { animation-delay: 0.2s; } .sk-grid-cube:nth-child(2) { animation-delay: 0.3s; } .sk-grid-cube:nth-child(3) { animation-delay: 0.4s; } .sk-grid-cube:nth-child(4) { animation-delay: 0.1s; } .sk-grid-cube:nth-child(5) { animation-delay: 0.2s; } .sk-grid-cube:nth-child(6) { animation-delay: 0.3s; } .sk-grid-cube:nth-child(7) { animation-delay: 0.0s; } .sk-grid-cube:nth-child(8) { animation-delay: 0.1s; } .sk-grid-cube:nth-child(9) { animation-delay: 0.2s; } @keyframes sk-grid { 0%, 70%, 100% { transform: scale3D(1, 1, 1); } 35% { transform: scale3D(0, 0, 1); } } /* Fold
*/ .sk-fold { width: var(--sk-size); height: var(--sk-size); position: relative; transform: rotateZ(45deg); } .sk-fold-cube { float: left; width: 50%; height: 50%; position: relative; transform: scale(1.1); } .sk-fold-cube:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--sk-color); animation: sk-fold 2.4s infinite linear both; transform-origin: 100% 100%; } .sk-fold-cube:nth-child(2) { transform: scale(1.1) rotateZ(90deg); } .sk-fold-cube:nth-child(4) { transform: scale(1.1) rotateZ(180deg); } .sk-fold-cube:nth-child(3) { transform: scale(1.1) rotateZ(270deg); } .sk-fold-cube:nth-child(2):before { animation-delay: 0.3s; } .sk-fold-cube:nth-child(4):before { animation-delay: 0.6s; } .sk-fold-cube:nth-child(3):before { animation-delay: 0.9s; } @keyframes sk-fold { 0%, 10% { transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { transform: perspective(140px) rotateY(180deg); opacity: 0; } } /* Wander
*/ .sk-wander { width: var(--sk-size); height: var(--sk-size); position: relative; } .sk-wander-cube { background-color: var(--sk-color); width: 20%; height: 20%; position: absolute; top: 0; left: 0; --sk-wander-distance: calc(var(--sk-size) * 0.75); animation: sk-wander 2.0s ease-in-out -2.0s infinite both; } .sk-wander-cube:nth-child(2) { animation-delay: -0.5s; } .sk-wander-cube:nth-child(3) { animation-delay: -1.0s; } @keyframes sk-wander { 0% { transform: rotate(0deg); } 25% { transform: translateX(var(--sk-wander-distance)) rotate(-90deg) scale(0.6); } 50% { /* Make FF rotate in the right direction */ transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-179deg); } 50.1% { transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-180deg); } 75% { transform: translateX(0) translateY(var(--sk-wander-distance)) rotate(-270deg) scale(0.6); } 100% { transform: rotate(-360deg); } } /*! * three-dots - v0.3.2 * CSS loading animations made with single element * https://nzbin.github.io/three-dots/ * * Copyright (c) 2018 nzbin * Released under MIT License */ @charset "UTF-8"; /** * ============================================== * Dot Elastic * ============================================== */ .dot-elastic { position: relative; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; animation: dot-elastic 1s infinite linear; } .dot-elastic::before, .dot-elastic::after { content: ""; display: inline-block; position: absolute; top: 0; } .dot-elastic::before { left: -15px; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; animation: dot-elastic-before 1s infinite linear; } .dot-elastic::after { left: 15px; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; animation: dot-elastic-after 1s infinite linear; } @keyframes dot-elastic-before { 0% { transform: scale(1, 1); } 25% { transform: scale(1, 1.5); } 50% { transform: scale(1, 0.67); } 75% { transform: scale(1, 1); } 100% { transform: scale(1, 1); } } @keyframes dot-elastic { 0% { transform: scale(1, 1); } 25% { transform: scale(1, 1); } 50% { transform: scale(1, 1.5); } 75% { transform: scale(1, 1); } 100% { transform: scale(1, 1); } } @keyframes dot-elastic-after { 0% { transform: scale(1, 1); } 25% { transform: scale(1, 1); } 50% { transform: scale(1, 0.67); } 75% { transform: scale(1, 1.5); } 100% { transform: scale(1, 1); } } /** * ============================================== * Dot Pulse * ============================================== */ .dot-pulse { position: relative; left: -9999px; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; box-shadow: 9999px 0 0 -5px; animation: dot-pulse 1.5s infinite linear; animation-delay: 0.25s; } .dot-pulse::before, .dot-pulse::after { content: ""; display: inline-block; position: absolute; top: 0; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; } .dot-pulse::before { box-shadow: 9984px 0 0 -5px; animation: dot-pulse-before 1.5s infinite linear; animation-delay: 0s; } .dot-pulse::after { box-shadow: 10014px 0 0 -5px; animation: dot-pulse-after 1.5s infinite linear; animation-delay: 0.5s; } @keyframes dot-pulse-before { 0% { box-shadow: 9984px 0 0 -5px; } 30% { box-shadow: 9984px 0 0 2px; } 60%, 100% { box-shadow: 9984px 0 0 -5px; } } @keyframes dot-pulse { 0% { box-shadow: 9999px 0 0 -5px; } 30% { box-shadow: 9999px 0 0 2px; } 60%, 100% { box-shadow: 9999px 0 0 -5px; } } @keyframes dot-pulse-after { 0% { box-shadow: 10014px 0 0 -5px; } 30% { box-shadow: 10014px 0 0 2px; } 60%, 100% { box-shadow: 10014px 0 0 -5px; } } /** * ============================================== * Dot Flashing * ============================================== */ .dot-flashing { position: relative; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; animation: dot-flashing 1s infinite linear alternate; animation-delay: 0.5s; } .dot-flashing::before, .dot-flashing::after { content: ""; display: inline-block; position: absolute; top: 0; } .dot-flashing::before { left: -15px; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; animation: dot-flashing 1s infinite alternate; animation-delay: 0s; } .dot-flashing::after { left: 15px; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; animation: dot-flashing 1s infinite alternate; animation-delay: 1s; } @keyframes dot-flashing { 0% { background-color: #9880ff; } 50%, 100% { background-color: rgba(152, 128, 255, 0.2); } } /** * ============================================== * Dot Collision * ============================================== */ .dot-collision { position: relative; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; } .dot-collision::before, .dot-collision::after { content: ""; display: inline-block; position: absolute; top: 0; } .dot-collision::before { left: -10px; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; animation: dot-collision-before 2s infinite ease-in; } .dot-collision::after { left: 10px; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; animation: dot-collision-after 2s infinite ease-in; animation-delay: 1s; } @keyframes dot-collision-before { 0%, 50%, 75%, 100% { transform: translateX(0); } 25% { transform: translateX(-15px); } } @keyframes dot-collision-after { 0%, 50%, 75%, 100% { transform: translateX(0); } 25% { transform: translateX(15px); } } /** * ============================================== * Dot Revolution * ============================================== */ .dot-revolution { position: relative; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; } .dot-revolution::before, .dot-revolution::after { content: ""; display: inline-block; position: absolute; } .dot-revolution::before { left: 0; top: -15px; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; transform-origin: 5px 20px; animation: dot-revolution 1.4s linear infinite; } .dot-revolution::after { left: 0; top: -30px; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; transform-origin: 5px 35px; animation: dot-revolution 1s linear infinite; } @keyframes dot-revolution { 0% { transform: rotateZ(0deg) translate3d(0, 0, 0); } 100% { transform: rotateZ(360deg) translate3d(0, 0, 0); } } /** * ============================================== * Dot Carousel * ============================================== */ .dot-carousel { position: relative; left: -9999px; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff; animation: dot-carousel 1.5s infinite linear; } @keyframes dot-carousel { 0% { box-shadow: 9984px 0 0 -1px #9880ff, 9999px 0 0 1px #9880ff, 10014px 0 0 -1px #9880ff; } 50% { box-shadow: 10014px 0 0 -1px #9880ff, 9984px 0 0 -1px #9880ff, 9999px 0 0 1px #9880ff; } 100% { box-shadow: 9999px 0 0 1px #9880ff, 10014px 0 0 -1px #9880ff, 9984px 0 0 -1px #9880ff; } } /** * ============================================== * Dot Typing * ============================================== */ .dot-typing { position: relative; left: -9999px; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff; animation: dot-typing 1.5s infinite linear; } @keyframes dot-typing { 0% { box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff; } 16.667% { box-shadow: 9984px -10px 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff; } 33.333% { box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff; } 50% { box-shadow: 9984px 0 0 0 #9880ff, 9999px -10px 0 0 #9880ff, 10014px 0 0 0 #9880ff; } 66.667% { box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff; } 83.333% { box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px -10px 0 0 #9880ff; } 100% { box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff; } } /** * ============================================== * Dot Windmill * ============================================== */ .dot-windmill { position: relative; top: -10px; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; transform-origin: 5px 15px; animation: dot-windmill 2s infinite linear; } .dot-windmill::before, .dot-windmill::after { content: ""; display: inline-block; position: absolute; } .dot-windmill::before { left: -8.66254px; top: 15px; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; } .dot-windmill::after { left: 8.66254px; top: 15px; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; } @keyframes dot-windmill { 0% { transform: rotateZ(0deg) translate3d(0, 0, 0); } 100% { transform: rotateZ(720deg) translate3d(0, 0, 0); } } /** * ============================================== * Dot Bricks * ============================================== */ .dot-bricks { position: relative; top: 8px; left: -9999px; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff; animation: dot-bricks 2s infinite ease; } @keyframes dot-bricks { 0% { box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff; } 8.333% { box-shadow: 10007px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff; } 16.667% { box-shadow: 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff, 10007px 0 0 0 #9880ff; } 25% { box-shadow: 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff; } 33.333% { box-shadow: 10007px 0 0 0 #9880ff, 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff; } 41.667% { box-shadow: 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff; } 50% { box-shadow: 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff; } 58.333% { box-shadow: 9991px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff; } 66.666% { box-shadow: 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff, 9991px -16px 0 0 #9880ff; } 75% { box-shadow: 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff; } 83.333% { box-shadow: 9991px -16px 0 0 #9880ff, 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff; } 91.667% { box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff; } 100% { box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff; } } /** * ============================================== * Dot Floating * ============================================== */ .dot-floating { position: relative; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; animation: dot-floating 3s infinite cubic-bezier(0.15, 0.6, 0.9, 0.1); } .dot-floating::before, .dot-floating::after { content: ""; display: inline-block; position: absolute; top: 0; } .dot-floating::before { left: -12px; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; animation: dot-floating-before 3s infinite ease-in-out; } .dot-floating::after { left: -24px; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; animation: dot-floating-after 3s infinite cubic-bezier(0.4, 0, 1, 1); } @keyframes dot-floating { 0% { left: calc(-50% - 5px); } 75% { left: calc(50% + 105px); } 100% { left: calc(50% + 105px); } } @keyframes dot-floating-before { 0% { left: -50px; } 50% { left: -12px; } 75% { left: -50px; } 100% { left: -50px; } } @keyframes dot-floating-after { 0% { left: -100px; } 50% { left: -24px; } 75% { left: -100px; } 100% { left: -100px; } } /** * ============================================== * Dot Fire * ============================================== */ .dot-fire { position: relative; left: -9999px; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; box-shadow: 9999px 22.5px 0 -5px #9880ff; animation: dot-fire 1.5s infinite linear; animation-delay: -0.85s; } .dot-fire::before, .dot-fire::after { content: ""; display: inline-block; position: absolute; top: 0; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; } .dot-fire::before { box-shadow: 9999px 22.5px 0 -5px #9880ff; animation: dot-fire 1.5s infinite linear; animation-delay: -1.85s; } .dot-fire::after { box-shadow: 9999px 22.5px 0 -5px #9880ff; animation: dot-fire 1.5s infinite linear; animation-delay: -2.85s; } @keyframes dot-fire { 1% { box-shadow: 9999px 22.5px 0 -5px #9880ff; } 50% { box-shadow: 9999px -5.625px 0 2px #9880ff; } 100% { box-shadow: 9999px -22.5px 0 -5px #9880ff; } } /** * ============================================== * Dot Spin * ============================================== */ .dot-spin { position: relative; width: 10px; height: 10px; border-radius: 5px; background-color: transparent; color: transparent; box-shadow: 0 -18px 0 0 #9880ff, 12.727926px -12.727926px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.727926px 12.727926px 0 0 rgba(152, 128, 255, 0), 0 18px 0 0 rgba(152, 128, 255, 0), -12.727926px 12.727926px 0 0 rgba(152, 128, 255, 0), -18px 0 0 0 rgba(152, 128, 255, 0), -12.727926px -12.727926px 0 0 rgba(152, 128, 255, 0); animation: dot-spin 1.5s infinite linear; } @keyframes dot-spin { 0%, 100% { box-shadow: 0 -18px 0 0 #9880ff, 12.727926px -12.727926px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0); } 12.5% { box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.727926px -12.727926px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.727926px 12.727926px 0 0 #9880ff, 0 18px 0 -5px rgba(152, 128, 255, 0), -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0); } 25% { box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 0 #9880ff, 12.727926px 12.727926px 0 0 #9880ff, 0 18px 0 0 #9880ff, -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0); } 37.5% { box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.727926px 12.727926px 0 0 #9880ff, 0 18px 0 0 #9880ff, -12.727926px 12.727926px 0 0 #9880ff, -18px 0 0 -5px rgba(152, 128, 255, 0), -12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0); } 50% { box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 0 #9880ff, -12.727926px 12.727926px 0 0 #9880ff, -18px 0 0 0 #9880ff, -12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0); } 62.5% { box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.727926px 12.727926px 0 0 #9880ff, -18px 0 0 0 #9880ff, -12.727926px -12.727926px 0 0 #9880ff; } 75% { box-shadow: 0 -18px 0 0 #9880ff, 12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 0 #9880ff, -12.727926px -12.727926px 0 0 #9880ff; } 87.5% { box-shadow: 0 -18px 0 0 #9880ff, 12.727926px -12.727926px 0 0 #9880ff, 18px 0 0 -5px rgba(152, 128, 255, 0), 12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.727926px -12.727926px 0 0 #9880ff; } } /** * ============================================== * Dot Falling * ============================================== */ .dot-falling { position: relative; left: -9999px; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; box-shadow: 9999px 0 0 0 #9880ff; animation: dot-falling 1s infinite linear; animation-delay: 0.1s; } .dot-falling::before, .dot-falling::after { content: ""; display: inline-block; position: absolute; top: 0; } .dot-falling::before { width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; animation: dot-falling-before 1s infinite linear; animation-delay: 0s; } .dot-falling::after { width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; animation: dot-falling-after 1s infinite linear; animation-delay: 0.2s; } @keyframes dot-falling { 0% { box-shadow: 9999px -15px 0 0 rgba(152, 128, 255, 0); } 25%, 50%, 75% { box-shadow: 9999px 0 0 0 #9880ff; } 100% { box-shadow: 9999px 15px 0 0 rgba(152, 128, 255, 0); } } @keyframes dot-falling-before { 0% { box-shadow: 9984px -15px 0 0 rgba(152, 128, 255, 0); } 25%, 50%, 75% { box-shadow: 9984px 0 0 0 #9880ff; } 100% { box-shadow: 9984px 15px 0 0 rgba(152, 128, 255, 0); } } @keyframes dot-falling-after { 0% { box-shadow: 10014px -15px 0 0 rgba(152, 128, 255, 0); } 25%, 50%, 75% { box-shadow: 10014px 0 0 0 #9880ff; } 100% { box-shadow: 10014px 15px 0 0 rgba(152, 128, 255, 0); } } /** * ============================================== * Dot Stretching * ============================================== */ .dot-stretching { position: relative; width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; transform: scale(1.25, 1.25); animation: dot-stretching 2s infinite ease-in; } .dot-stretching::before, .dot-stretching::after { content: ""; display: inline-block; position: absolute; top: 0; } .dot-stretching::before { width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; animation: dot-stretching-before 2s infinite ease-in; } .dot-stretching::after { width: 10px; height: 10px; border-radius: 5px; background-color: #9880ff; color: #9880ff; animation: dot-stretching-after 2s infinite ease-in; } @keyframes dot-stretching { 0% { transform: scale(1.25, 1.25); } 50%, 60% { transform: scale(0.8, 0.8); } 100% { transform: scale(1.25, 1.25); } } @keyframes dot-stretching-before { 0% { transform: translate(0) scale(0.7, 0.7); } 50%, 60% { transform: translate(-20px) scale(1, 1); } 100% { transform: translate(0) scale(0.7, 0.7); } } @keyframes dot-stretching-after { 0% { transform: translate(0) scale(0.7, 0.7); } 50%, 60% { transform: translate(20px) scale(1, 1); } 100% { transform: translate(0) scale(0.7, 0.7); } } /** * ============================================== * Experimental: Gooey Effect * Dot Gathering * ============================================== */ .dot-gathering { position: relative; width: 12px; height: 12px; border-radius: 6px; background-color: hsl(0deg, 100%, 0%); color: transparent; margin: -1px 0; filter: blur(2px); } .dot-gathering::before, .dot-gathering::after { content: ""; display: inline-block; position: absolute; top: 0; left: -50px; width: 12px; height: 12px; border-radius: 6px; background-color: hsl(0deg, 100%, 0%); color: transparent; opacity: 0; filter: blur(2px); animation: dot-gathering 2s infinite ease-in; } .dot-gathering::after { animation-delay: 0.5s; } @keyframes dot-gathering { 0% { opacity: 0; transform: translateX(0); } 35%, 60% { opacity: 1; transform: translateX(50px); } 100% { opacity: 0; transform: translateX(100px); } } /** * ============================================== * Experimental: Gooey Effect * Dot Hourglass * ============================================== */ .dot-hourglass { position: relative; top: -15px; width: 12px; height: 12px; border-radius: 6px; background-color: hsl(0deg, 100%, 0%); color: transparent; margin: -1px 0; filter: blur(2px); transform-origin: 5px 20px; animation: dot-hourglass 2.4s infinite ease-in-out; animation-delay: 0.6s; } .dot-hourglass::before, .dot-hourglass::after { content: ""; display: inline-block; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 6px; background-color: hsl(0deg, 100%, 0%); color: transparent; filter: blur(2px); } .dot-hourglass::before { top: 30px; } .dot-hourglass::after { animation: dot-hourglass-after 2.4s infinite cubic-bezier(0.65, 0.05, 0.36, 1); } @keyframes dot-hourglass { 0% { transform: rotateZ(0deg); } 25% { transform: rotateZ(180deg); } 50% { transform: rotateZ(180deg); } 75% { transform: rotateZ(360deg); } 100% { transform: rotateZ(360deg); } } @keyframes dot-hourglass-after { 0% { transform: translateY(0); } 25% { transform: translateY(30px); } 50% { transform: translateY(30px); } 75% { transform: translateY(0); } 100% { transform: translateY(0); } } /** * ============================================== * Experimental: Gooey Effect * Dot Overtaking * ============================================== */ .dot-overtaking { position: relative; width: 12px; height: 12px; border-radius: 6px; background-color: transparent; color: hsl(0deg, 100%, 0%); margin: -1px 0; box-shadow: 0 -20px 0 0; filter: blur(2px); animation: dot-overtaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2); } .dot-overtaking::before, .dot-overtaking::after { content: ""; display: inline-block; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 6px; background-color: transparent; color: hsl(0deg, 100%, 0%); box-shadow: 0 -20px 0 0; filter: blur(2px); } .dot-overtaking::before { animation: dot-overtaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2); animation-delay: 0.3s; } .dot-overtaking::after { animation: dot-overtaking 1.5s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2); animation-delay: 0.6s; } @keyframes dot-overtaking { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } /** * ============================================== * Experimental: Gooey Effect * Dot Shuttle * ============================================== */ .dot-shuttle { position: relative; left: -15px; width: 12px; height: 12px; border-radius: 6px; background-color: hsl(0deg, 100%, 0%); color: transparent; margin: -1px 0; filter: blur(2px); } .dot-shuttle::before, .dot-shuttle::after { content: ""; display: inline-block; position: absolute; top: 0; width: 12px; height: 12px; border-radius: 6px; background-color: hsl(0deg, 100%, 0%); color: transparent; filter: blur(2px); } .dot-shuttle::before { left: 15px; animation: dot-shuttle 2s infinite ease-out; } .dot-shuttle::after { left: 30px; } @keyframes dot-shuttle { 0%, 50%, 100% { transform: translateX(0); } 25% { transform: translateX(-45px); } 75% { transform: translateX(45px); } } /** * ============================================== * Experimental: Emoji * Dot Bouncing * ============================================== */ .dot-bouncing { position: relative; height: 10px; font-size: 10px; } .dot-bouncing::before { content: "⚽🏀🏐"; display: inline-block; position: relative; animation: dot-bouncing 1s infinite; } @keyframes dot-bouncing { 0% { top: -20px; animation-timing-function: ease-in; } 34% { transform: scale(1, 1); } 35% { top: 20px; animation-timing-function: ease-out; transform: scale(1.5, 0.5); } 45% { transform: scale(1, 1); } 90% { top: -20px; } 100% { top: -20px; } } /** * ============================================== * Experimental: Emoji * Dot Rolling * ============================================== */ .dot-rolling { position: relative; height: 10px; font-size: 10px; } .dot-rolling::before { content: "⚽"; display: inline-block; position: relative; transform: translateX(-25px); animation: dot-rolling 3s infinite; } @keyframes dot-rolling { 0% { content: "⚽"; transform: translateX(-25px) rotateZ(0deg); } 16.667% { content: "⚽"; transform: translateX(25px) rotateZ(720deg); } 33.333% { content: "⚽"; transform: translateX(-25px) rotateZ(0deg); } 34.333% { content: "🏀"; transform: translateX(-25px) rotateZ(0deg); } 50% { content: "🏀"; transform: translateX(25px) rotateZ(720deg); } 66.667% { content: "🏀"; transform: translateX(-25px) rotateZ(0deg); } 67.667% { content: "🏐"; transform: translateX(-25px) rotateZ(0deg); } 83.333% { content: "🏐"; transform: translateX(25px) rotateZ(720deg); } 100% { content: "🏐"; transform: translateX(-25px) rotateZ(0deg); } } /*# sourceMappingURL=three-dots.css.map */ .ball-pulse-sync>div,.ball-pulse>div{width:15px;height:15px;margin:2px;display:inline-block}.ball-pulse-sync>div,.ball-pulse>div,.ball-scale>div{background-color:#fff;border-radius:100%}@-webkit-keyframes ldr-scale{0%,80%{-webkit-transform:scale(1);transform:scale(1);opacity:1}45%{-webkit-transform:scale(.1);transform:scale(.1);opacity:.7}}@keyframes ldr-scale{0%,80%{-webkit-transform:scale(1);transform:scale(1);opacity:1}45%{-webkit-transform:scale(.1);transform:scale(.1);opacity:.7}}.ball-pulse>div:nth-child(0){-webkit-animation:ldr-scale .75s -.36s infinite cubic-bezier(.2,.68,.18,1.08);animation:ldr-scale .75s -.36s infinite cubic-bezier(.2,.68,.18,1.08)}.ball-pulse>div:nth-child(1){-webkit-animation:ldr-scale .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08);animation:ldr-scale .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08)}.ball-pulse>div:nth-child(2){-webkit-animation:ldr-scale .75s -.12s infinite cubic-bezier(.2,.68,.18,1.08);animation:ldr-scale .75s -.12s infinite cubic-bezier(.2,.68,.18,1.08)}.ball-pulse>div:nth-child(3){-webkit-animation:ldr-scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08);animation:ldr-scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08)}.ball-pulse>div{-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes ldr-ball-pulse-sync{33%{-webkit-transform:translateY(10px);transform:translateY(10px)}66%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes ldr-ball-pulse-sync{33%{-webkit-transform:translateY(10px);transform:translateY(10px)}66%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}.ball-pulse-sync>div:nth-child(0){-webkit-animation:ldr-ball-pulse-sync .6s -.21s infinite ease-in-out;animation:ldr-ball-pulse-sync .6s -.21s infinite ease-in-out}.ball-pulse-sync>div:nth-child(1){-webkit-animation:ldr-ball-pulse-sync .6s -.14s infinite ease-in-out;animation:ldr-ball-pulse-sync .6s -.14s infinite ease-in-out}.ball-pulse-sync>div:nth-child(2){-webkit-animation:ldr-ball-pulse-sync .6s -.07s infinite ease-in-out;animation:ldr-ball-pulse-sync .6s -.07s infinite ease-in-out}.ball-pulse-sync>div:nth-child(3){-webkit-animation:ldr-ball-pulse-sync .6s 0s infinite ease-in-out;animation:ldr-ball-pulse-sync .6s 0s infinite ease-in-out}.ball-pulse-sync>div{-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes ldr-ball-scale{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}@keyframes ldr-ball-scale{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}.ball-scale>div{height:60px;width:60px;animation:ball-ldr-scale 1s 0s ease-in-out infinite}.ball-scale-random>div,.ball-scale>div{display:inline-block;margin:2px;-webkit-animation:ball-ldr-scale 1s 0s ease-in-out infinite}.ball-scale-random{width:37px;height:40px}.ball-scale-random>div{background-color:#fff;border-radius:100%;position:absolute;height:30px;width:30px;animation:ball-ldr-scale 1s 0s ease-in-out infinite}.ball-rotate>div,.ball-rotate>div:after,.ball-rotate>div:before{background-color:#fff;width:15px;height:15px;border-radius:100%}.ball-rotate,.ball-rotate>div{position:relative}.ball-scale-random>div:nth-child(1){margin-left:-7px;-webkit-animation:ball-ldr-scale 1s .2s ease-in-out infinite;animation:ball-ldr-scale 1s .2s ease-in-out infinite}.ball-scale-random>div:nth-child(3){margin-left:-2px;margin-top:9px;-webkit-animation:ball-ldr-scale 1s .5s ease-in-out infinite;animation:ball-ldr-scale 1s .5s ease-in-out infinite}@-webkit-keyframes ldr-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ball-rotate>div{margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both}.ball-rotate>div:first-child{-webkit-animation:ldr-rotate 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite;animation:ldr-rotate 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite}.ball-rotate>div:after,.ball-rotate>div:before{margin:2px;content:"";position:absolute;opacity:.8}.ball-rotate>div:before{top:0;left:-28px}.ball-rotate>div:after{top:0;left:25px}.ball-clip-rotate>div{border-radius:100%;margin:2px;border:2px solid #fff;border-bottom-color:transparent;height:25px;width:25px;background:0 0!important;display:inline-block;-webkit-animation:ldr-rotate .75s 0s linear infinite;animation:ldr-rotate .75s 0s linear infinite}@keyframes ldr-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes ldr-scale{30%{-webkit-transform:scale(.3);transform:scale(.3)}100%{-webkit-transform:scale(1);transform:scale(1)}}.ball-clip-rotate-pulse{position:relative;-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}.ball-clip-rotate-pulse>div{-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute;top:0;left:0;border-radius:100%}.ball-clip-rotate-pulse>div:first-child{background:#fff;height:16px;width:16px;top:7px;left:-7px;-webkit-animation:ldr-scale 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:ldr-scale 1s 0s cubic-bezier(.09,.57,.49,.9) infinite}.ball-clip-rotate-pulse>div:last-child{position:absolute;width:30px;height:30px;left:-16px;top:-2px;background:0 0;border:2px solid;border-color:#fff transparent;-webkit-animation:ldr-rotate 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:ldr-rotate 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;-webkit-animation-duration:1s;animation-duration:1s}@keyframes ldr-rotate{0%{-webkit-transform:rotate(0) scale(1);transform:rotate(0) scale(1)}50%{-webkit-transform:rotate(180deg) scale(.6);transform:rotate(180deg) scale(.6)}100%{-webkit-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}}.ball-clip-rotate-multiple{position:relative}.ball-clip-rotate-multiple>div{position:absolute;left:-20px;top:-20px;border:2px solid #fff;border-bottom-color:transparent;border-top-color:transparent;border-radius:100%;height:35px;width:35px;-webkit-animation:ldr-rotate 1s 0s ease-in-out infinite;animation:ldr-rotate 1s 0s ease-in-out infinite}.ball-clip-rotate-multiple>div:last-child{display:inline-block;top:-10px;left:-10px;width:15px;height:15px;-webkit-animation-duration:.5s;animation-duration:.5s;border-color:#fff transparent;-webkit-animation-direction:reverse;animation-direction:reverse}@-webkit-keyframes ldr-ball-scale-ripple{0%{-webkit-transform:scale(.1);transform:scale(.1);opacity:1}70%{-webkit-transform:scale(1);transform:scale(1);opacity:.7}100%{opacity:0}}@keyframes ldr-ball-scale-ripple{0%{-webkit-transform:scale(.1);transform:scale(.1);opacity:1}70%{-webkit-transform:scale(1);transform:scale(1);opacity:.7}100%{opacity:0}}.ball-scale-ripple>div{height:50px;width:50px;border-radius:100%;border:2px solid #fff;-webkit-animation:ball-ldr-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8);animation:ball-ldr-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8)}@-webkit-keyframes ldr-ball-scale-ripple-multiple{0%{-webkit-transform:scale(.1);transform:scale(.1);opacity:1}70%{-webkit-transform:scale(1);transform:scale(1);opacity:.7}100%{opacity:0}}@keyframes ldr-ball-scale-ripple-multiple{0%{-webkit-transform:scale(.1);transform:scale(.1);opacity:1}70%{-webkit-transform:scale(1);transform:scale(1);opacity:.7}100%{opacity:0}}.ball-scale-ripple-multiple{position:relative;-webkit-transform:translateY(-25px);-ms-transform:translateY(-25px);transform:translateY(-25px)}.ball-scale-ripple-multiple>div:nth-child(0){-webkit-animation-delay:-.8s;animation-delay:-.8s}.ball-scale-ripple-multiple>div:nth-child(1){-webkit-animation-delay:-.6s;animation-delay:-.6s}.ball-scale-ripple-multiple>div:nth-child(2){-webkit-animation-delay:-.4s;animation-delay:-.4s}.ball-scale-ripple-multiple>div:nth-child(3){-webkit-animation-delay:-.2s;animation-delay:-.2s}.ball-scale-ripple-multiple>div{position:absolute;top:-2px;left:-26px;width:50px;height:50px;border-radius:100%;border:2px solid #fff;-webkit-animation:ball-ldr-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21,.53,.56,.8);animation:ball-ldr-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21,.53,.56,.8)}@-webkit-keyframes ldr-ball-beat{50%{opacity:.2;-webkit-transform:scale(.75);transform:scale(.75)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes ldr-ball-beat{50%{opacity:.2;-webkit-transform:scale(.75);transform:scale(.75)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.ball-beat>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;display:inline-block;-webkit-animation:ldr-ball-beat .7s 0s infinite linear;animation:ldr-ball-beat .7s 0s infinite linear}.ball-beat>div:nth-child(2n-1){-webkit-animation-delay:-.35s!important;animation-delay:-.35s!important}@-webkit-keyframes ldr-ball-scale-multiple{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}5%{opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}@keyframes ldr-ball-scale-multiple{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}5%{opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}.ball-scale-multiple{position:relative;-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px)}.ball-scale-multiple>div:nth-child(2){-webkit-animation-delay:-.4s;animation-delay:-.4s}.ball-scale-multiple>div:nth-child(3){-webkit-animation-delay:-.2s;animation-delay:-.2s}.ball-scale-multiple>div{background-color:#fff;border-radius:100%;position:absolute;left:-30px;top:0;opacity:0;margin:0;width:60px;height:60px;-webkit-animation:ball-ldr-scale-multiple 1s 0s linear infinite;animation:ball-ldr-scale-multiple 1s 0s linear infinite}@-webkit-keyframes ldr-ball-triangle-path-1{33%{-webkit-transform:translate(25px,-50px);transform:translate(25px,-50px)}66%{-webkit-transform:translate(50px,0);transform:translate(50px,0)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ldr-ball-triangle-path-1{33%{-webkit-transform:translate(25px,-50px);transform:translate(25px,-50px)}66%{-webkit-transform:translate(50px,0);transform:translate(50px,0)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes ldr-ball-triangle-path-2{33%{-webkit-transform:translate(25px,50px);transform:translate(25px,50px)}66%{-webkit-transform:translate(-25px,50px);transform:translate(-25px,50px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ldr-ball-triangle-path-2{33%{-webkit-transform:translate(25px,50px);transform:translate(25px,50px)}66%{-webkit-transform:translate(-25px,50px);transform:translate(-25px,50px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes ldr-ball-triangle-path-3{33%{-webkit-transform:translate(-50px,0);transform:translate(-50px,0)}66%{-webkit-transform:translate(-25px,-50px);transform:translate(-25px,-50px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ldr-ball-triangle-path-3{33%{-webkit-transform:translate(-50px,0);transform:translate(-50px,0)}66%{-webkit-transform:translate(-25px,-50px);transform:translate(-25px,-50px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}.ball-triangle-path{position:relative;-webkit-transform:translate(-29.99px,-37.51px);-ms-transform:translate(-29.99px,-37.51px);transform:translate(-29.99px,-37.51px)}.ball-triangle-path>div:nth-child(1){-webkit-animation-name:ldr-ball-triangle-path-1;animation-name:ldr-ball-triangle-path-1;-webkit-animation-delay:0;animation-delay:0;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.ball-triangle-path>div:nth-child(2){-webkit-animation-name:ldr-ball-triangle-path-2;animation-name:ldr-ball-triangle-path-2;-webkit-animation-delay:0;animation-delay:0;animation-duration:2s;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.ball-triangle-path>div:nth-child(2),.ball-triangle-path>div:nth-child(3){-webkit-animation-duration:2s;-webkit-animation-timing-function:ease-in-out}.ball-triangle-path>div:nth-child(3){-webkit-animation-name:ldr-ball-triangle-path-3;animation-name:ldr-ball-triangle-path-3;-webkit-animation-delay:0;animation-delay:0;animation-duration:2s;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.ball-triangle-path>div{-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute;width:10px;height:10px;border-radius:100%;border:1px solid #fff}.ball-grid-beat>div,.ball-pulse-rise>div{background-color:#fff;height:15px;border-radius:100%;margin:2px}.ball-triangle-path>div:nth-of-type(1){top:50px}.ball-triangle-path>div:nth-of-type(2){left:25px}.ball-triangle-path>div:nth-of-type(3){top:50px;left:50px}@-webkit-keyframes ldr-ball-pulse-rise-even{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}25%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}50%{-webkit-transform:scale(.4);transform:scale(.4)}75%{-webkit-transform:translateY(30px);transform:translateY(30px)}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:scale(1);transform:scale(1)}}@keyframes ldr-ball-pulse-rise-even{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}25%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}50%{-webkit-transform:scale(.4);transform:scale(.4)}75%{-webkit-transform:translateY(30px);transform:translateY(30px)}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes ldr-ball-pulse-rise-odd{0%{-webkit-transform:scale(.4);transform:scale(.4)}25%{-webkit-transform:translateY(30px);transform:translateY(30px)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}75%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:scale(.75);transform:scale(.75)}}@keyframes ldr-ball-pulse-rise-odd{0%{-webkit-transform:scale(.4);transform:scale(.4)}25%{-webkit-transform:translateY(30px);transform:translateY(30px)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}75%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:scale(.75);transform:scale(.75)}}.ball-pulse-rise>div{width:15px;-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:cubic-bezier(.15,.46,.9,.6);animation-timing-function:cubic-bezier(.15,.46,.9,.6);-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:0;animation-delay:0}.ball-pulse-rise>div:nth-child(2n){-webkit-animation-name:ldr-ball-pulse-rise-even;animation-name:ldr-ball-pulse-rise-even}.ball-pulse-rise>div:nth-child(2n-1){-webkit-animation-name:ldr-ball-pulse-rise-odd;animation-name:ldr-ball-pulse-rise-odd}@-webkit-keyframes ldr-ball-grid-beat{50%{opacity:.7}100%{opacity:1}}@keyframes ldr-ball-grid-beat{50%{opacity:.7}100%{opacity:1}}.ball-grid-beat{width:57px}.ball-grid-beat>div:nth-child(1){-webkit-animation-delay:.44s;animation-delay:.44s;-webkit-animation-duration:1.27s;animation-duration:1.27s}.ball-grid-beat>div:nth-child(2){-webkit-animation-delay:.2s;animation-delay:.2s;-webkit-animation-duration:1.52s;animation-duration:1.52s}.ball-grid-beat>div:nth-child(3){-webkit-animation-delay:.14s;animation-delay:.14s;-webkit-animation-duration:.61s;animation-duration:.61s}.ball-grid-beat>div:nth-child(4){-webkit-animation-delay:.15s;animation-delay:.15s;-webkit-animation-duration:.82s;animation-duration:.82s}.ball-grid-beat>div:nth-child(5){-webkit-animation-delay:-.01s;animation-delay:-.01s;-webkit-animation-duration:1.24s;animation-duration:1.24s}.ball-grid-beat>div:nth-child(6){-webkit-animation-delay:-.07s;animation-delay:-.07s;-webkit-animation-duration:1.35s;animation-duration:1.35s}.ball-grid-beat>div:nth-child(7){-webkit-animation-delay:.29s;animation-delay:.29s;-webkit-animation-duration:1.44s;animation-duration:1.44s}.ball-grid-beat>div:nth-child(8){-webkit-animation-delay:.63s;animation-delay:.63s;-webkit-animation-duration:1.19s;animation-duration:1.19s}.ball-grid-beat>div:nth-child(9){-webkit-animation-delay:-.18s;animation-delay:-.18s;-webkit-animation-duration:1.48s;animation-duration:1.48s}.ball-grid-beat>div{width:15px;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:ldr-ball-grid-beat;animation-name:ldr-ball-grid-beat;animation-iteration-count:infinite;-webkit-animation-delay:0;animation-delay:0}.ball-grid-beat>div,.ball-grid-pulse>div{display:inline-block;float:left;-webkit-animation-iteration-count:infinite}@-webkit-keyframes ldr-ball-grid-pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(.5);transform:scale(.5);opacity:.7}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes ldr-ball-grid-pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(.5);transform:scale(.5);opacity:.7}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.ball-grid-pulse{width:57px}.ball-grid-pulse>div,.ball-spin-fade-loader>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px}.ball-grid-pulse>div:nth-child(1){-webkit-animation-delay:.58s;animation-delay:.58s;-webkit-animation-duration:.9s;animation-duration:.9s}.ball-grid-pulse>div:nth-child(2){-webkit-animation-delay:.01s;animation-delay:.01s;-webkit-animation-duration:.94s;animation-duration:.94s}.ball-grid-pulse>div:nth-child(3){-webkit-animation-delay:.25s;animation-delay:.25s;-webkit-animation-duration:1.43s;animation-duration:1.43s}.ball-grid-pulse>div:nth-child(4){-webkit-animation-delay:-.03s;animation-delay:-.03s;-webkit-animation-duration:.74s;animation-duration:.74s}.ball-grid-pulse>div:nth-child(5){-webkit-animation-delay:.21s;animation-delay:.21s;-webkit-animation-duration:.68s;animation-duration:.68s}.ball-grid-pulse>div:nth-child(6){-webkit-animation-delay:.25s;animation-delay:.25s;-webkit-animation-duration:1.17s;animation-duration:1.17s}.ball-grid-pulse>div:nth-child(7){-webkit-animation-delay:.46s;animation-delay:.46s;-webkit-animation-duration:1.41s;animation-duration:1.41s}.ball-grid-pulse>div:nth-child(8){-webkit-animation-delay:.02s;animation-delay:.02s;-webkit-animation-duration:1.56s;animation-duration:1.56s}.ball-grid-pulse>div:nth-child(9){-webkit-animation-delay:.13s;animation-delay:.13s;-webkit-animation-duration:.78s;animation-duration:.78s}.ball-grid-pulse>div{-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:ldr-ball-grid-pulse;animation-name:ldr-ball-grid-pulse;animation-iteration-count:infinite;-webkit-animation-delay:0;animation-delay:0}@-webkit-keyframes ldr-ball-spin-fade-loader{50%{opacity:.3;-webkit-transform:scale(.4);transform:scale(.4)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes ldr-ball-spin-fade-loader{50%{opacity:.3;-webkit-transform:scale(.4);transform:scale(.4)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.ball-spin-fade-loader{position:relative;top:-10px;left:-10px}.ball-spin-fade-loader>div:nth-child(1){top:25px;left:0;-webkit-animation:ldr-ball-spin-fade-loader 1s -.96s infinite linear;animation:ldr-ball-spin-fade-loader 1s -.96s infinite linear}.ball-spin-fade-loader>div:nth-child(2){top:17.05px;left:17.05px;-webkit-animation:ldr-ball-spin-fade-loader 1s -.84s infinite linear;animation:ldr-ball-spin-fade-loader 1s -.84s infinite linear}.ball-spin-fade-loader>div:nth-child(3){top:0;left:25px;-webkit-animation:ldr-ball-spin-fade-loader 1s -.72s infinite linear;animation:ldr-ball-spin-fade-loader 1s -.72s infinite linear}.ball-spin-fade-loader>div:nth-child(4){top:-17.05px;left:17.05px;-webkit-animation:ldr-ball-spin-fade-loader 1s -.6s infinite linear;animation:ldr-ball-spin-fade-loader 1s -.6s infinite linear}.ball-spin-fade-loader>div:nth-child(5){top:-25px;left:0;-webkit-animation:ldr-ball-spin-fade-loader 1s -.48s infinite linear;animation:ldr-ball-spin-fade-loader 1s -.48s infinite linear}.ball-spin-fade-loader>div:nth-child(6){top:-17.05px;left:-17.05px;-webkit-animation:ldr-ball-spin-fade-loader 1s -.36s infinite linear;animation:ldr-ball-spin-fade-loader 1s -.36s infinite linear}.ball-spin-fade-loader>div:nth-child(7){top:0;left:-25px;-webkit-animation:ldr-ball-spin-fade-loader 1s -.24s infinite linear;animation:ldr-ball-spin-fade-loader 1s -.24s infinite linear}.ball-spin-fade-loader>div:nth-child(8){top:17.05px;left:-17.05px;-webkit-animation:ldr-ball-spin-fade-loader 1s -.12s infinite linear;animation:ldr-ball-spin-fade-loader 1s -.12s infinite linear}.ball-spin-fade-loader>div{-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute}@-webkit-keyframes ldr-ball-spin-loader{75%{opacity:.2}100%{opacity:1}}@keyframes ldr-ball-spin-loader{75%{opacity:.2}100%{opacity:1}}.ball-spin-loader{position:relative}.ball-spin-loader>span:nth-child(1){top:45px;left:0;-webkit-animation:ldr-ball-spin-loader 2s .9s infinite linear;animation:ldr-ball-spin-loader 2s .9s infinite linear}.ball-spin-loader>span:nth-child(2){top:30.68px;left:30.68px;-webkit-animation:ldr-ball-spin-loader 2s 1.8s infinite linear;animation:ldr-ball-spin-loader 2s 1.8s infinite linear}.ball-spin-loader>span:nth-child(3){top:0;left:45px;-webkit-animation:ldr-ball-spin-loader 2s 2.7s infinite linear;animation:ldr-ball-spin-loader 2s 2.7s infinite linear}.ball-spin-loader>span:nth-child(4){top:-30.68px;left:30.68px;-webkit-animation:ldr-ball-spin-loader 2s 3.6s infinite linear;animation:ldr-ball-spin-loader 2s 3.6s infinite linear}.ball-spin-loader>span:nth-child(5){top:-45px;left:0;-webkit-animation:ldr-ball-spin-loader 2s 4.5s infinite linear;animation:ldr-ball-spin-loader 2s 4.5s infinite linear}.ball-spin-loader>span:nth-child(6){top:-30.68px;left:-30.68px;-webkit-animation:ldr-ball-spin-loader 2s 5.4s infinite linear;animation:ldr-ball-spin-loader 2s 5.4s infinite linear}.ball-spin-loader>span:nth-child(7){top:0;left:-45px;-webkit-animation:ldr-ball-spin-loader 2s 6.3s infinite linear;animation:ldr-ball-spin-loader 2s 6.3s infinite linear}.ball-spin-loader>span:nth-child(8){top:30.68px;left:-30.68px;-webkit-animation:ldr-ball-spin-loader 2s 7.2s infinite linear;animation:ldr-ball-spin-loader 2s 7.2s infinite linear}.ball-spin-loader>div{-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute;width:15px;height:15px;border-radius:100%;background:green}.ball-zig-zag-deflect>div,.ball-zig-zag>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px 2px 2px 15px;top:4px;left:-7px}@-webkit-keyframes ldr-ball-zig{33%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}66%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ldr-ball-zig{33%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}66%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes ldr-ball-zag{33%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px)}66%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ldr-ball-zag{33%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px)}66%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}.ball-zig-zag{position:relative;-webkit-transform:translate(-15px,-15px);-ms-transform:translate(-15px,-15px);transform:translate(-15px,-15px)}.ball-zig-zag>div{-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute}.ball-zig-zag>div:first-child{-webkit-animation:ldr-ball-zig .7s 0s infinite linear;animation:ldr-ball-zig .7s 0s infinite linear}.ball-zig-zag>div:last-child{-webkit-animation:ldr-ball-zag .7s 0s infinite linear;animation:ldr-ball-zag .7s 0s infinite linear}@-webkit-keyframes ldr-ball-zig-deflect{17%,84%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}34%,67%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}100%,50%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ldr-ball-zig-deflect{17%,84%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}34%,67%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}100%,50%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes ldr-ball-zag-deflect{17%,84%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px)}34%,67%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px)}100%,50%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ldr-ball-zag-deflect{17%,84%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px)}34%,67%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px)}100%,50%{-webkit-transform:translate(0,0);transform:translate(0,0)}}.ball-zig-zag-deflect{position:relative;-webkit-transform:translate(-15px,-15px);-ms-transform:translate(-15px,-15px);transform:translate(-15px,-15px)}.ball-zig-zag-deflect>div{-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute}.ball-zig-zag-deflect>div:first-child{-webkit-animation:ldr-ldr-ball-zig-deflect 1.5s 0s infinite linear;animation:ldr-ldr-ball-zig-deflect 1.5s 0s infinite linear}.ball-zig-zag-deflect>div:last-child{-webkit-animation:ldr-ldr-ball-zag-deflect 1.5s 0s infinite linear;animation:ldr-ldr-ball-zag-deflect 1.5s 0s infinite linear}@-webkit-keyframes ldr-line-scale{0%,100%{-webkit-transform:scaley(1);transform:scaley(1)}50%{-webkit-transform:scaley(.4);transform:scaley(.4)}}@keyframes ldr-line-scale{0%,100%{-webkit-transform:scaley(1);transform:scaley(1)}50%{-webkit-transform:scaley(.4);transform:scaley(.4)}}.line-scale>div:nth-child(1){-webkit-animation:line-ldr-scale 1s -.4s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-ldr-scale 1s -.4s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(2){-webkit-animation:line-ldr-scale 1s -.3s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-ldr-scale 1s -.3s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(3){-webkit-animation:line-ldr-scale 1s -.2s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-ldr-scale 1s -.2s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(4){-webkit-animation:line-ldr-scale 1s -.1s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-ldr-scale 1s -.1s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(5){-webkit-animation:line-ldr-scale 1s 0s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-ldr-scale 1s 0s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div{animation-fill-mode:both;display:inline-block}.line-scale-party>div,.line-scale>div{background-color:#fff;border-radius:2px;margin:2px;width:4px;height:35px;-webkit-animation-fill-mode:both}@-webkit-keyframes ldr-line-scale-party{0%,100%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(.5);transform:scale(.5)}}@keyframes ldr-line-scale-party{0%,100%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(.5);transform:scale(.5)}}.line-scale-party>div:nth-child(1){-webkit-animation-delay:-.09s;animation-delay:-.09s;-webkit-animation-duration:.83s;animation-duration:.83s}.line-scale-party>div:nth-child(2){-webkit-animation-delay:.33s;animation-delay:.33s;-webkit-animation-duration:.64s;animation-duration:.64s}.line-scale-party>div:nth-child(3){-webkit-animation-delay:.32s;animation-delay:.32s;-webkit-animation-duration:.39s;animation-duration:.39s}.line-scale-party>div:nth-child(4){-webkit-animation-delay:.47s;animation-delay:.47s;-webkit-animation-duration:.52s;animation-duration:.52s}.line-scale-party>div{animation-fill-mode:both;display:inline-block;-webkit-animation-name:line-ldr-scale-party;animation-name:line-ldr-scale-party;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:0;animation-delay:0}@-webkit-keyframes ldr-line-scale-pulse-out{0%,100%{-webkit-transform:scaley(1);transform:scaley(1)}50%{-webkit-transform:scaley(.4);transform:scaley(.4)}}@keyframes ldr-line-scale-pulse-out{0%,100%{-webkit-transform:scaley(1);transform:scaley(1)}50%{-webkit-transform:scaley(.4);transform:scaley(.4)}}.line-scale-pulse-out>div{background-color:#fff;width:4px;height:35px;border-radius:2px;margin:2px;display:inline-block;-webkit-animation:line-ldr-scale-pulse-out .9s -.6s infinite cubic-bezier(.85,.25,.37,.85);animation:line-ldr-scale-pulse-out .9s -.6s infinite cubic-bezier(.85,.25,.37,.85)}.line-scale-pulse-out>div:nth-child(2),.line-scale-pulse-out>div:nth-child(4){-webkit-animation-delay:-.4s!important;animation-delay:-.4s!important}.line-scale-pulse-out>div:nth-child(1),.line-scale-pulse-out>div:nth-child(5){-webkit-animation-delay:-.2s!important;animation-delay:-.2s!important}@-webkit-keyframes ldr-line-scale-pulse-out-rapid{0%,90%{-webkit-transform:scaley(1);transform:scaley(1)}80%{-webkit-transform:scaley(.3);transform:scaley(.3)}}@keyframes ldr-line-scale-pulse-out-rapid{0%,90%{-webkit-transform:scaley(1);transform:scaley(1)}80%{-webkit-transform:scaley(.3);transform:scaley(.3)}}.line-scale-pulse-out-rapid>div{background-color:#fff;width:4px;height:35px;border-radius:2px;margin:2px;display:inline-block;-webkit-animation:line-ldr-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11,.49,.38,.78);animation:line-ldr-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11,.49,.38,.78)}.line-scale-pulse-out-rapid>div:nth-child(2),.line-scale-pulse-out-rapid>div:nth-child(4){-webkit-animation-delay:-.25s!important;animation-delay:-.25s!important}.line-scale-pulse-out-rapid>div:nth-child(1),.line-scale-pulse-out-rapid>div:nth-child(5){-webkit-animation-delay:0s!important;animation-delay:0s!important}@-webkit-keyframes ldr-line-spin-fade-loader{50%{opacity:.3}100%{opacity:1}}@keyframes ldr-line-spin-fade-loader{50%{opacity:.3}100%{opacity:1}}.line-spin-fade-loader{position:relative;top:-10px;left:-4px}.line-spin-fade-loader>div:nth-child(1){top:20px;left:0;-webkit-animation:ldr-line-spin-fade-loader 1.2s -.84s infinite ease-in-out;animation:ldr-line-spin-fade-loader 1.2s -.84s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(2){top:13.64px;left:13.64px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:ldr-line-spin-fade-loader 1.2s -.72s infinite ease-in-out;animation:ldr-line-spin-fade-loader 1.2s -.72s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(3){top:0;left:20px;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);-webkit-animation:ldr-line-spin-fade-loader 1.2s -.6s infinite ease-in-out;animation:ldr-line-spin-fade-loader 1.2s -.6s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(4){top:-13.64px;left:13.64px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-animation:ldr-line-spin-fade-loader 1.2s -.48s infinite ease-in-out;animation:ldr-line-spin-fade-loader 1.2s -.48s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(5){top:-20px;left:0;-webkit-animation:ldr-line-spin-fade-loader 1.2s -.36s infinite ease-in-out;animation:ldr-line-spin-fade-loader 1.2s -.36s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(6){top:-13.64px;left:-13.64px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:ldr-line-spin-fade-loader 1.2s -.24s infinite ease-in-out;animation:ldr-line-spin-fade-loader 1.2s -.24s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(7){top:0;left:-20px;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);-webkit-animation:ldr-line-spin-fade-loader 1.2s -.12s infinite ease-in-out;animation:ldr-line-spin-fade-loader 1.2s -.12s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(8){top:13.64px;left:-13.64px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-animation:ldr-line-spin-fade-loader 1.2s 0s infinite ease-in-out;animation:ldr-line-spin-fade-loader 1.2s 0s infinite ease-in-out}.line-spin-fade-loader>div{background-color:#fff;border-radius:2px;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute;width:5px;height:15px}@-webkit-keyframes ldr-triangle-skew-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}@keyframes ldr-triangle-skew-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}.triangle-skew-spin>div{width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:20px solid #fff;-webkit-animation:ldr-triangle-skew-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:ldr-triangle-skew-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite}@-webkit-keyframes ldr-square-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}@keyframes ldr-square-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}.square-spin>div{width:50px;height:50px;background:#fff;border:1px solid red;-webkit-animation:ldr-square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:ldr-square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite}.pacman>div:first-of-type,.pacman>div:nth-child(2){width:0;height:0;border-right:25px solid transparent;border-top:25px solid #fff;border-left:25px solid #fff;border-bottom:25px solid #fff;border-radius:25px;position:relative;left:-30px}@-webkit-keyframes ldr-rotate_pacman_half_up{0%,100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}50%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes ldr-rotate_pacman_half_up{0%,100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}50%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes ldr-rotate_pacman_half_down{0%,100%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}50%{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes ldr-rotate_pacman_half_down{0%,100%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}50%{-webkit-transform:rotate(0);transform:rotate(0)}}@-webkit-keyframes ldr-pacman-balls{75%{opacity:.7}100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px)}}@keyframes ldr-pacman-balls{75%{opacity:.7}100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px)}}.pacman{position:relative}.pacman>div:nth-child(3){-webkit-animation:ldr-pacman-balls 1s -.66s infinite linear;animation:ldr-pacman-balls 1s -.66s infinite linear}.pacman>div:nth-child(4){-webkit-animation:ldr-pacman-balls 1s -.33s infinite linear;animation:ldr-pacman-balls 1s -.33s infinite linear}.pacman>div:nth-child(5){-webkit-animation:ldr-pacman-balls 1s 0s infinite linear;animation:ldr-pacman-balls 1s 0s infinite linear}.pacman>div:first-of-type{-webkit-animation:rotate_pacman_half_up .5s 0s infinite;animation:rotate_pacman_half_up .5s 0s infinite}.pacman>div:nth-child(2){-webkit-animation:rotate_pacman_half_down .5s 0s infinite;animation:rotate_pacman_half_down .5s 0s infinite;margin-top:-50px}.pacman>div:nth-child(3),.pacman>div:nth-child(4),.pacman>div:nth-child(5),.pacman>div:nth-child(6){background-color:#fff;border-radius:100%;margin:2px;width:10px;height:10px;position:absolute;-webkit-transform:translate(0,-6.25px);-ms-transform:translate(0,-6.25px);transform:translate(0,-6.25px);top:25px;left:70px}@-webkit-keyframes ldr-cube-transition{25%{-webkit-transform:translateX(50px) scale(.5) rotate(-90deg);transform:translateX(50px) scale(.5) rotate(-90deg)}50%{-webkit-transform:translate(50px,50px) rotate(-180deg);transform:translate(50px,50px) rotate(-180deg)}75%{-webkit-transform:translateY(50px) scale(.5) rotate(-270deg);transform:translateY(50px) scale(.5) rotate(-270deg)}100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}@keyframes ldr-cube-transition{25%{-webkit-transform:translateX(50px) scale(.5) rotate(-90deg);transform:translateX(50px) scale(.5) rotate(-90deg)}50%{-webkit-transform:translate(50px,50px) rotate(-180deg);transform:translate(50px,50px) rotate(-180deg)}75%{-webkit-transform:translateY(50px) scale(.5) rotate(-270deg);transform:translateY(50px) scale(.5) rotate(-270deg)}100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}.cube-transition{position:relative;-webkit-transform:translate(-25px,-25px);-ms-transform:translate(-25px,-25px);transform:translate(-25px,-25px)}.cube-transition>div{width:10px;height:10px;position:absolute;top:-5px;left:-5px;background-color:#fff;-webkit-animation:ldr-cube-transition 1.6s 0s infinite ease-in-out;animation:ldr-cube-transition 1.6s 0s infinite ease-in-out}.cube-transition>div:last-child{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes ldr-spin-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes ldr-spin-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.semi-circle-spin{position:relative;width:35px;height:35px;overflow:hidden}.semi-circle-spin>div{position:absolute;border-width:0;border-radius:100%;-webkit-animation:spin-ldr-rotate .6s 0s infinite linear;animation:spin-ldr-rotate .6s 0s infinite linear;background-image:-webkit-linear-gradient(transparent 0,transparent 70%,#fff 30%,#fff 100%);background-image:linear-gradient(transparent 0,transparent 70%,#fff 30%,#fff 100%);width:100%;height:100%}@-webkit-keyframes ldr-bar-progress{0%,100%{-webkit-transform:scaleY(20%);transform:scaleY(20%);opacity:1}25%,75%{-webkit-transform:translateX(6%) scaleY(10%);transform:translateX(6%) scaleY(10%);opacity:.7}50%{-webkit-transform:translateX(20%) scaleY(20%);transform:translateX(20%) scaleY(20%);opacity:1}}@keyframes ldr-bar-progress{0%,100%{-webkit-transform:scaleY(20%);transform:scaleY(20%);opacity:1}25%,75%{-webkit-transform:translateX(6%) scaleY(10%);transform:translateX(6%) scaleY(10%);opacity:.7}50%{-webkit-transform:translateX(20%) scaleY(20%);transform:translateX(20%) scaleY(20%);opacity:1}}.bar-progress{width:30%;height:12px}.bar-progress>div{position:relative;width:20%;height:12px;border-radius:10px;background-color:#fff;-webkit-animation:ldr-bar-progress 3s cubic-bezier(.57,.1,.44,.93) infinite;animation:ldr-bar-progress 3s cubic-bezier(.57,.1,.44,.93) infinite;opacity:1}.bar-swing,.bar-swing>div{height:8px;width:30%}@-webkit-keyframes ldr-bar-swing{0%,100%{left:0}50%{left:70%}}@keyframes ldr-bar-swing{0%,100%{left:0}50%{left:70%}}.bar-swing>div{position:relative;border-radius:10px;background-color:#fff;-webkit-animation:ldr-bar-swing 1.5s infinite;animation:ldr-bar-swing 1.5s infinite}@-webkit-keyframes ldr-bar-swing-container{0%,100%{left:0;-webkit-transform:translateX(0);transform:translateX(0)}50%{left:70%;-webkit-transform:translateX(-4px);transform:translateX(-4px)}}@keyframes ldr-bar-swing-container{0%,100%{left:0;-webkit-transform:translateX(0);transform:translateX(0)}50%{left:70%;-webkit-transform:translateX(-4px);transform:translateX(-4px)}}.bar-swing-container{width:20%;height:8px;position:relative}.bar-swing-container div:nth-child(1){position:absolute;width:100%;background-color:rgba(255,255,255,.2);height:12px;border-radius:10px}.bar-swing-container div:nth-child(2){position:absolute;width:30%;height:8px;border-radius:10px;background-color:#fff;-webkit-animation:ldr-ldr-bar-swing-container 2s cubic-bezier(.91,.35,.12,.6) infinite;animation:ldr-ldr-bar-swing-container 2s cubic-bezier(.91,.35,.12,.6) infinite;margin:2px 2px 0} /*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */ .hamburger { padding: 15px 15px; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger:hover { opacity: 0.7; } .hamburger.is-active:hover { opacity: 0.7; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: #000; } .hamburger-box { width: 40px; height: 24px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -2px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 40px; height: 4px; background-color: #000; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -10px; } .hamburger-inner::after { bottom: -10px; } /* * 3DX */ .hamburger--3dx .hamburger-box { perspective: 80px; } .hamburger--3dx .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx.is-active .hamburger-inner { background-color: transparent !important; transform: rotateY(180deg); } .hamburger--3dx.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dx.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DX Reverse */ .hamburger--3dx-r .hamburger-box { perspective: 80px; } .hamburger--3dx-r .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx-r.is-active .hamburger-inner { background-color: transparent !important; transform: rotateY(-180deg); } .hamburger--3dx-r.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dx-r.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DY */ .hamburger--3dy .hamburger-box { perspective: 80px; } .hamburger--3dy .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy.is-active .hamburger-inner { background-color: transparent !important; transform: rotateX(-180deg); } .hamburger--3dy.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dy.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DY Reverse */ .hamburger--3dy-r .hamburger-box { perspective: 80px; } .hamburger--3dy-r .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy-r.is-active .hamburger-inner { background-color: transparent !important; transform: rotateX(180deg); } .hamburger--3dy-r.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dy-r.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DXY */ .hamburger--3dxy .hamburger-box { perspective: 80px; } .hamburger--3dxy .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy.is-active .hamburger-inner { background-color: transparent !important; transform: rotateX(180deg) rotateY(180deg); } .hamburger--3dxy.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dxy.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DXY Reverse */ .hamburger--3dxy-r .hamburger-box { perspective: 80px; } .hamburger--3dxy-r .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy-r.is-active .hamburger-inner { background-color: transparent !important; transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); } .hamburger--3dxy-r.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dxy-r.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * Arrow */ .hamburger--arrow.is-active .hamburger-inner::before { transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); } .hamburger--arrow.is-active .hamburger-inner::after { transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); } /* * Arrow Right */ .hamburger--arrow-r.is-active .hamburger-inner::before { transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); } .hamburger--arrow-r.is-active .hamburger-inner::after { transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); } /* * Arrow Alt */ .hamburger--arrowalt .hamburger-inner::before { transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt .hamburger-inner::after { transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt.is-active .hamburger-inner::before { top: 0; transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } .hamburger--arrowalt.is-active .hamburger-inner::after { bottom: 0; transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } /* * Arrow Alt Right */ .hamburger--arrowalt-r .hamburger-inner::before { transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt-r .hamburger-inner::after { transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt-r.is-active .hamburger-inner::before { top: 0; transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } .hamburger--arrowalt-r.is-active .hamburger-inner::after { bottom: 0; transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } /* * Arrow Turn */ .hamburger--arrowturn.is-active .hamburger-inner { transform: rotate(-180deg); } .hamburger--arrowturn.is-active .hamburger-inner::before { transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); } .hamburger--arrowturn.is-active .hamburger-inner::after { transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); } /* * Arrow Turn Right */ .hamburger--arrowturn-r.is-active .hamburger-inner { transform: rotate(-180deg); } .hamburger--arrowturn-r.is-active .hamburger-inner::before { transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); } .hamburger--arrowturn-r.is-active .hamburger-inner::after { transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); } /* * Boring */ .hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after { transition-property: none; } .hamburger--boring.is-active .hamburger-inner { transform: rotate(45deg); } .hamburger--boring.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--boring.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); } /* * Collapse */ .hamburger--collapse .hamburger-inner { top: auto; bottom: 0; transition-duration: 0.13s; transition-delay: 0.13s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse .hamburger-inner::after { top: -20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } .hamburger--collapse .hamburger-inner::before { transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse.is-active .hamburger-inner { transform: translate3d(0, -10px, 0) rotate(-45deg); transition-delay: 0.22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--collapse.is-active .hamburger-inner::after { top: 0; opacity: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } .hamburger--collapse.is-active .hamburger-inner::before { top: 0; transform: rotate(-90deg); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Collapse Reverse */ .hamburger--collapse-r .hamburger-inner { top: auto; bottom: 0; transition-duration: 0.13s; transition-delay: 0.13s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse-r .hamburger-inner::after { top: -20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } .hamburger--collapse-r .hamburger-inner::before { transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse-r.is-active .hamburger-inner { transform: translate3d(0, -10px, 0) rotate(45deg); transition-delay: 0.22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--collapse-r.is-active .hamburger-inner::after { top: 0; opacity: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } .hamburger--collapse-r.is-active .hamburger-inner::before { top: 0; transform: rotate(90deg); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Elastic */ .hamburger--elastic .hamburger-inner { top: 2px; transition-duration: 0.275s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic .hamburger-inner::before { top: 10px; transition: opacity 0.125s 0.275s ease; } .hamburger--elastic .hamburger-inner::after { top: 20px; transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(135deg); transition-delay: 0.075s; } .hamburger--elastic.is-active .hamburger-inner::before { transition-delay: 0s; opacity: 0; } .hamburger--elastic.is-active .hamburger-inner::after { transform: translate3d(0, -20px, 0) rotate(-270deg); transition-delay: 0.075s; } /* * Elastic Reverse */ .hamburger--elastic-r .hamburger-inner { top: 2px; transition-duration: 0.275s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic-r .hamburger-inner::before { top: 10px; transition: opacity 0.125s 0.275s ease; } .hamburger--elastic-r .hamburger-inner::after { top: 20px; transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic-r.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(-135deg); transition-delay: 0.075s; } .hamburger--elastic-r.is-active .hamburger-inner::before { transition-delay: 0s; opacity: 0; } .hamburger--elastic-r.is-active .hamburger-inner::after { transform: translate3d(0, -20px, 0) rotate(270deg); transition-delay: 0.075s; } /* * Emphatic */ .hamburger--emphatic { overflow: hidden; } .hamburger--emphatic .hamburger-inner { transition: background-color 0.125s 0.175s ease-in; } .hamburger--emphatic .hamburger-inner::before { left: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; } .hamburger--emphatic .hamburger-inner::after { top: 10px; right: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; } .hamburger--emphatic.is-active .hamburger-inner { transition-delay: 0s; transition-timing-function: ease-out; background-color: transparent !important; } .hamburger--emphatic.is-active .hamburger-inner::before { left: -80px; top: -80px; transform: translate3d(80px, 80px, 0) rotate(45deg); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } .hamburger--emphatic.is-active .hamburger-inner::after { right: -80px; top: -80px; transform: translate3d(-80px, 80px, 0) rotate(-45deg); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } /* * Emphatic Reverse */ .hamburger--emphatic-r { overflow: hidden; } .hamburger--emphatic-r .hamburger-inner { transition: background-color 0.125s 0.175s ease-in; } .hamburger--emphatic-r .hamburger-inner::before { left: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; } .hamburger--emphatic-r .hamburger-inner::after { top: 10px; right: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; } .hamburger--emphatic-r.is-active .hamburger-inner { transition-delay: 0s; transition-timing-function: ease-out; background-color: transparent !important; } .hamburger--emphatic-r.is-active .hamburger-inner::before { left: -80px; top: 80px; transform: translate3d(80px, -80px, 0) rotate(-45deg); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } .hamburger--emphatic-r.is-active .hamburger-inner::after { right: -80px; top: 80px; transform: translate3d(-80px, -80px, 0) rotate(45deg); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } /* * Minus */ .hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after { transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; } .hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after { opacity: 0; transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; } .hamburger--minus.is-active .hamburger-inner::before { top: 0; } .hamburger--minus.is-active .hamburger-inner::after { bottom: 0; } /* * Slider */ .hamburger--slider .hamburger-inner { top: 2px; } .hamburger--slider .hamburger-inner::before { top: 10px; transition-property: transform, opacity; transition-timing-function: ease; transition-duration: 0.15s; } .hamburger--slider .hamburger-inner::after { top: 20px; } .hamburger--slider.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--slider.is-active .hamburger-inner::before { transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0); opacity: 0; } .hamburger--slider.is-active .hamburger-inner::after { transform: translate3d(0, -20px, 0) rotate(-90deg); } /* * Slider Reverse */ .hamburger--slider-r .hamburger-inner { top: 2px; } .hamburger--slider-r .hamburger-inner::before { top: 10px; transition-property: transform, opacity; transition-timing-function: ease; transition-duration: 0.15s; } .hamburger--slider-r .hamburger-inner::after { top: 20px; } .hamburger--slider-r.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(-45deg); } .hamburger--slider-r.is-active .hamburger-inner::before { transform: rotate(45deg) translate3d(5.71429px, -6px, 0); opacity: 0; } .hamburger--slider-r.is-active .hamburger-inner::after { transform: translate3d(0, -20px, 0) rotate(90deg); } /* * Spin */ .hamburger--spin .hamburger-inner { transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin .hamburger-inner::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin.is-active .hamburger-inner { transform: rotate(225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Spin Reverse */ .hamburger--spin-r .hamburger-inner { transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin-r .hamburger-inner::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin-r .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin-r.is-active .hamburger-inner { transform: rotate(-225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin-r.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin-r.is-active .hamburger-inner::after { bottom: 0; transform: rotate(90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Spring */ .hamburger--spring .hamburger-inner { top: 2px; transition: background-color 0s 0.13s linear; } .hamburger--spring .hamburger-inner::before { top: 10px; transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring .hamburger-inner::after { top: 20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring.is-active .hamburger-inner { transition-delay: 0.22s; background-color: transparent !important; } .hamburger--spring.is-active .hamburger-inner::before { top: 0; transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--spring.is-active .hamburger-inner::after { top: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 10px, 0) rotate(-45deg); } /* * Spring Reverse */ .hamburger--spring-r .hamburger-inner { top: auto; bottom: 0; transition-duration: 0.13s; transition-delay: 0s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring-r .hamburger-inner::after { top: -20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; } .hamburger--spring-r .hamburger-inner::before { transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring-r.is-active .hamburger-inner { transform: translate3d(0, -10px, 0) rotate(-45deg); transition-delay: 0.22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spring-r.is-active .hamburger-inner::after { top: 0; opacity: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; } .hamburger--spring-r.is-active .hamburger-inner::before { top: 0; transform: rotate(90deg); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Stand */ .hamburger--stand .hamburger-inner { transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; } .hamburger--stand .hamburger-inner::before { transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand .hamburger-inner::after { transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand.is-active .hamburger-inner { transform: rotate(90deg); background-color: transparent !important; transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; } .hamburger--stand.is-active .hamburger-inner::before { top: 0; transform: rotate(-45deg); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand.is-active .hamburger-inner::after { bottom: 0; transform: rotate(45deg); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Stand Reverse */ .hamburger--stand-r .hamburger-inner { transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; } .hamburger--stand-r .hamburger-inner::before { transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r .hamburger-inner::after { transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r.is-active .hamburger-inner { transform: rotate(-90deg); background-color: transparent !important; transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; } .hamburger--stand-r.is-active .hamburger-inner::before { top: 0; transform: rotate(-45deg); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand-r.is-active .hamburger-inner::after { bottom: 0; transform: rotate(45deg); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Squeeze */ .hamburger--squeeze .hamburger-inner { transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze .hamburger-inner::before { transition: top 0.075s 0.12s ease, opacity 0.075s ease; } .hamburger--squeeze .hamburger-inner::after { transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze.is-active .hamburger-inner { transform: rotate(45deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--squeeze.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.075s ease, opacity 0.075s 0.12s ease; } .hamburger--squeeze.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Vortex */ .hamburger--vortex .hamburger-inner { transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after { transition-duration: 0s; transition-delay: 0.1s; transition-timing-function: linear; } .hamburger--vortex .hamburger-inner::before { transition-property: top, opacity; } .hamburger--vortex .hamburger-inner::after { transition-property: bottom, transform; } .hamburger--vortex.is-active .hamburger-inner { transform: rotate(765deg); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after { transition-delay: 0s; } .hamburger--vortex.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--vortex.is-active .hamburger-inner::after { bottom: 0; transform: rotate(90deg); } /* * Vortex Reverse */ .hamburger--vortex-r .hamburger-inner { transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after { transition-duration: 0s; transition-delay: 0.1s; transition-timing-function: linear; } .hamburger--vortex-r .hamburger-inner::before { transition-property: top, opacity; } .hamburger--vortex-r .hamburger-inner::after { transition-property: bottom, transform; } .hamburger--vortex-r.is-active .hamburger-inner { transform: rotate(-765deg); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after { transition-delay: 0s; } .hamburger--vortex-r.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--vortex-r.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); }