diff --git a/animate.scss b/animate.scss index e0a486b..5be14ef 100755 --- a/animate.scss +++ b/animate.scss @@ -9,19 +9,19 @@ */ .animated { - -webkit-animation-duration: 0.5s; animation-duration: 0.5s; - -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { - -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { - -webkit-animation-duration: 2s; + animation-duration: 2s; +} + +.animated.medium-duration { animation-duration: 2s; } @@ -29,83 +29,35 @@ .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { - -webkit-animation-duration: .75s; animation-duration: .75s; } -@-webkit-keyframes bounce { - from, 20%, 53%, 80%, to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - -webkit-transform: translate3d(0,0,0); - transform: translate3d(0,0,0); - } - - 40%, 43% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); - animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); - -webkit-transform: translate3d(0, -30px, 0); - transform: translate3d(0, -30px, 0); - } - - 70% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); - animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); - -webkit-transform: translate3d(0, -15px, 0); - transform: translate3d(0, -15px, 0); - } - - 90% { - -webkit-transform: translate3d(0,-4px,0); - transform: translate3d(0,-4px,0); - } -} - @keyframes bounce { from, 20%, 53%, 80%, to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); - -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); - -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { - -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } } .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; @@ -117,1114 +69,524 @@ } .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); } } .pulse { - -webkit-animation-name: pulse; animation-name: pulse; } -@-webkit-keyframes rubberBand { - from { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); +@keyframes heartBeat { + 0% { + transform: scale(1); } - 30% { - -webkit-transform: scale3d(1.25, 0.75, 1); - transform: scale3d(1.25, 0.75, 1); + 14% { + transform: scale(1.3); } - 40% { - -webkit-transform: scale3d(0.75, 1.25, 1); - transform: scale3d(0.75, 1.25, 1); + 28% { + transform: scale(1); } - 50% { - -webkit-transform: scale3d(1.15, 0.85, 1); - transform: scale3d(1.15, 0.85, 1); + 42% { + transform: scale(1.3); } - 65% { - -webkit-transform: scale3d(.95, 1.05, 1); - transform: scale3d(.95, 1.05, 1); + 70% { + transform: scale(1); } +} - 75% { - -webkit-transform: scale3d(1.05, .95, 1); - transform: scale3d(1.05, .95, 1); - } - - to { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } +.heartBeat { + animation-name: heartBeat; + animation-duration: calc(var(--animate-duration) * 1.3); + animation-timing-function: ease-in-out; } @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(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { - -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } to { - -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { - -webkit-animation-name: rubberBand; animation-name: rubberBand; } -@-webkit-keyframes shake { - 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 shake { 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); } } .shake { - -webkit-animation-name: shake; animation-name: shake; } -@-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); } } .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); } } .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(.9, .9, .9) rotate3d(0, 0, 1, -3deg); - transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); - } - - 30%, 50%, 70%, 90% { - -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); - transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); - } - - 40%, 60%, 80% { - -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); - transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); - } - - to { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } -} - @keyframes tada { from { - -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { - -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { - -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { - -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { - -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { - -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - -@-webkit-keyframes wobble { - from { - -webkit-transform: none; - transform: none; - } - - 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: none; - transform: none; - } -} - @keyframes wobble { from { - -webkit-transform: none; transform: none; } 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: none; transform: none; } } .wobble { - -webkit-animation-name: wobble; animation-name: wobble; } -@-webkit-keyframes jello { - from, 11.1%, to { - -webkit-transform: none; - transform: none; - } - - 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: none; transform: none; } 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); } } .jello { - -webkit-animation-name: jello; animation-name: jello; - -webkit-transform-origin: center; transform-origin: center; } -@-webkit-keyframes bounceIn { - from, 20%, 40%, 60%, 80%, to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } - - 0% { - opacity: 0; - -webkit-transform: scale3d(.3, .3, .3); - transform: scale3d(.3, .3, .3); - } - - 20% { - -webkit-transform: scale3d(1.1, 1.1, 1.1); - transform: scale3d(1.1, 1.1, 1.1); - } - - 40% { - -webkit-transform: scale3d(.9, .9, .9); - transform: scale3d(.9, .9, .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(.97, .97, .97); - transform: scale3d(.97, .97, .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.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; - -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { - -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { - -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .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(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; - -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { - -webkit-animation-name: bounceIn; animation-name: bounceIn; } -@-webkit-keyframes bounceInDown { - from, 60%, 75%, 90%, to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } - - 0% { - opacity: 0; - -webkit-transform: translate3d(0, -3000px, 0); - transform: translate3d(0, -3000px, 0); - } - - 60% { - opacity: 1; - -webkit-transform: translate3d(0, 25px, 0); - transform: translate3d(0, 25px, 0); - } - - 75% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); - } - - 90% { - -webkit-transform: translate3d(0, 5px, 0); - transform: translate3d(0, 5px, 0); - } - - to { - -webkit-transform: none; - transform: none; - } -} - @keyframes bounceInDown { from, 60%, 75%, 90%, to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; - -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; - -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { - -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { - -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { - -webkit-transform: none; transform: none; } } .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.610, 0.355, 1.000); - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } - - 0% { - opacity: 0; - -webkit-transform: translate3d(-3000px, 0, 0); - transform: translate3d(-3000px, 0, 0); - } - - 60% { - opacity: 1; - -webkit-transform: translate3d(25px, 0, 0); - transform: translate3d(25px, 0, 0); - } - - 75% { - -webkit-transform: translate3d(-10px, 0, 0); - transform: translate3d(-10px, 0, 0); - } - - 90% { - -webkit-transform: translate3d(5px, 0, 0); - transform: translate3d(5px, 0, 0); - } - - to { - -webkit-transform: none; - transform: none; - } -} - @keyframes bounceInLeft { from, 60%, 75%, 90%, to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; - -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; - -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { - -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { - -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { - -webkit-transform: none; transform: none; } } .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.610, 0.355, 1.000); - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } - - from { - opacity: 0; - -webkit-transform: translate3d(3000px, 0, 0); - transform: translate3d(3000px, 0, 0); - } - - 60% { - opacity: 1; - -webkit-transform: translate3d(-25px, 0, 0); - transform: translate3d(-25px, 0, 0); - } - - 75% { - -webkit-transform: translate3d(10px, 0, 0); - transform: translate3d(10px, 0, 0); - } - - 90% { - -webkit-transform: translate3d(-5px, 0, 0); - transform: translate3d(-5px, 0, 0); - } - - to { - -webkit-transform: none; - transform: none; - } -} - @keyframes bounceInRight { from, 60%, 75%, 90%, to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; - -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; - -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { - -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { - -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { - -webkit-transform: none; transform: none; } } .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.610, 0.355, 1.000); - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } - - from { - opacity: 0; - -webkit-transform: translate3d(0, 3000px, 0); - transform: translate3d(0, 3000px, 0); - } - - 60% { - opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); - } - - 75% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); - } - - 90% { - -webkit-transform: translate3d(0, -5px, 0); - transform: translate3d(0, -5px, 0); - } - - 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.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; - -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { - -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { - -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { - -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { - -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } -@-webkit-keyframes bounceOut { - 20% { - -webkit-transform: scale3d(.9, .9, .9); - transform: scale3d(.9, .9, .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(.3, .3, .3); - transform: scale3d(.3, .3, .3); - } -} - @keyframes bounceOut { 20% { - -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .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(.3, .3, .3); transform: scale3d(.3, .3, .3); } } .bounceOut { - -webkit-animation-name: bounceOut; animation-name: bounceOut; } -@-webkit-keyframes bounceOutDown { - 20% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); - } - - 40%, 45% { - opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); - } -} - @keyframes bounceOutDown { 20% { - -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { - -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } -@-webkit-keyframes bounceOutLeft { - 20% { - opacity: 1; - -webkit-transform: translate3d(20px, 0, 0); - transform: translate3d(20px, 0, 0); - } - - to { - opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); - } -} - @keyframes bounceOutLeft { 20% { opacity: 1; - -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { - -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } -@-webkit-keyframes bounceOutRight { - 20% { - opacity: 1; - -webkit-transform: translate3d(-20px, 0, 0); - transform: translate3d(-20px, 0, 0); - } - - to { - opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); - } -} - @keyframes bounceOutRight { 20% { opacity: 1; - -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { - -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } -@-webkit-keyframes bounceOutUp { - 20% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); - } - - 40%, 45% { - opacity: 1; - -webkit-transform: translate3d(0, 20px, 0); - transform: translate3d(0, 20px, 0); - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); - } -} - @keyframes bounceOutUp { 20% { - -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; - -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { - -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } -@-webkit-keyframes fadeIn { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - @keyframes fadeIn { from { opacity: 0; @@ -1236,284 +598,137 @@ } .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: none; - transform: none; - } -} - @keyframes fadeInDown { from { opacity: 0; - -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; - -webkit-transform: none; transform: none; } } .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: none; - transform: none; - } -} - @keyframes fadeInDownBig { from { opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; - -webkit-transform: none; transform: none; } } .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: none; - transform: none; - } -} - @keyframes fadeInLeft { from { opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; - -webkit-transform: none; transform: none; } } .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: none; - transform: none; - } -} - @keyframes fadeInLeftBig { from { opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; - -webkit-transform: none; transform: none; } } .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: none; - transform: none; - } -} - @keyframes fadeInRight { from { opacity: 0; - -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; - -webkit-transform: none; transform: none; } } .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: none; - transform: none; - } -} - @keyframes fadeInRightBig { from { opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; - -webkit-transform: none; transform: none; } } .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: none; - transform: none; - } -} - @keyframes fadeInUp { from { opacity: 0; - -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; - -webkit-transform: none; transform: none; } } .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: none; - transform: none; - } -} - @keyframes fadeInUpBig { from { opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; - -webkit-transform: none; transform: none; } } .fadeInUpBig { - -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } -@-webkit-keyframes fadeOut { - from { - opacity: 1; - } - - to { - opacity: 0; - } -} - @keyframes fadeOut { from { opacity: 1; @@ -1525,22 +740,9 @@ } .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; @@ -1548,28 +750,14 @@ to { opacity: 0; - -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .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; @@ -1577,28 +765,14 @@ to { opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .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; @@ -1606,28 +780,14 @@ to { opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .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; @@ -1635,28 +795,14 @@ to { opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .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; @@ -1664,28 +810,14 @@ to { opacity: 0; - -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .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; @@ -1693,28 +825,14 @@ to { opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .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; @@ -1722,28 +840,14 @@ to { opacity: 0; - -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .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; @@ -1751,935 +855,417 @@ to { opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { - -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } -@-webkit-keyframes flip { - from { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); - transform: perspective(400px) rotate3d(0, 1, 0, -360deg); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } - - 40% { - -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); - transform: perspective(400px) 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) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); - transform: perspective(400px) 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(.95, .95, .95); - transform: perspective(400px) scale3d(.95, .95, .95); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - - to { - -webkit-transform: perspective(400px); - transform: perspective(400px); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } -} - @keyframes flip { from { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); - -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { - -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) 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) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) 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(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); - -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { - -webkit-transform: perspective(400px); transform: perspective(400px); - -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.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); } } .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); } } .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; } } .flipOutX { - -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; } } .flipOutY { - -webkit-backface-visibility: visible !important; backface-visibility: visible !important; - -webkit-animation-name: flipOutY; animation-name: flipOutY; } -@-webkit-keyframes lightSpeedIn { - 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); - opacity: 1; - } - - to { - -webkit-transform: none; - transform: none; - opacity: 1; - } -} - @keyframes lightSpeedIn { 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); opacity: 1; } to { - -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { - -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; - -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } -@-webkit-keyframes lightSpeedOut { - from { - opacity: 1; - } - - to { - -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); - transform: translate3d(100%, 0, 0) skewX(30deg); - opacity: 0; - } -} - @keyframes lightSpeedOut { from { opacity: 1; } to { - -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { - -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; - -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } -@-webkit-keyframes rotateIn { - from { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, -200deg); - transform: rotate3d(0, 0, 1, -200deg); - opacity: 0; - } - - to { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: none; - transform: none; - opacity: 1; - } -} - @keyframes rotateIn { from { - -webkit-transform-origin: center; transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { - -webkit-transform-origin: center; transform-origin: center; - -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { - -webkit-animation-name: rotateIn; animation-name: rotateIn; } -@-webkit-keyframes rotateInDownLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; - } - - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: none; - transform: none; - opacity: 1; - } -} - @keyframes rotateInDownLeft { from { - -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { - -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { - -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } -@-webkit-keyframes rotateInDownRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; - } - - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: none; - transform: none; - opacity: 1; - } -} - @keyframes rotateInDownRight { from { - -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { - -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { - -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } -@-webkit-keyframes rotateInUpLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; - } - - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: none; - transform: none; - opacity: 1; - } -} - @keyframes rotateInUpLeft { from { - -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { - -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { - -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } -@-webkit-keyframes rotateInUpRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -90deg); - transform: rotate3d(0, 0, 1, -90deg); - opacity: 0; - } - - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: none; - transform: none; - opacity: 1; - } -} - @keyframes rotateInUpRight { from { - -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { - -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { - -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } -@-webkit-keyframes rotateOut { - from { - -webkit-transform-origin: center; - transform-origin: center; - opacity: 1; - } - - to { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, 200deg); - transform: rotate3d(0, 0, 1, 200deg); - opacity: 0; - } -} - @keyframes rotateOut { from { - -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { - -webkit-transform-origin: center; transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { - -webkit-animation-name: rotateOut; animation-name: rotateOut; } -@-webkit-keyframes rotateOutDownLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - opacity: 1; - } - - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; - } -} - @keyframes rotateOutDownLeft { from { - -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { - -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { - -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } -@-webkit-keyframes rotateOutDownRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - opacity: 1; - } - - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; - } -} - @keyframes rotateOutDownRight { from { - -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { - -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { - -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } -@-webkit-keyframes rotateOutUpLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - opacity: 1; - } - - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; - } -} - @keyframes rotateOutUpLeft { from { - -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { - -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { - -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } -@-webkit-keyframes rotateOutUpRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - opacity: 1; - } - - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 90deg); - transform: rotate3d(0, 0, 1, 90deg); - opacity: 0; - } -} - @keyframes rotateOutUpRight { from { - -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { - -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { - -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } -@-webkit-keyframes hinge { - 0% { - -webkit-transform-origin: top left; - transform-origin: top left; - -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-transform-origin: top left; - transform-origin: top left; - -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-transform-origin: top left; - transform-origin: top left; - -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-transform-origin: top left; transform-origin: top left; - -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-transform-origin: top left; transform-origin: top left; - -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-transform-origin: top left; transform-origin: top left; - -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; } } .hinge { - -webkit-animation-name: hinge; animation-name: hinge; } /* 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: none; - transform: none; - } -} - @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: none; transform: none; } } .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; @@ -2687,32 +1273,17 @@ to { opacity: 0; - -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { - -webkit-animation-name: rollOut; animation-name: rollOut; } -@-webkit-keyframes zoomIn { - from { - opacity: 0; - -webkit-transform: scale3d(.3, .3, .3); - transform: scale3d(.3, .3, .3); - } - - 50% { - opacity: 1; - } -} - @keyframes zoomIn { from { opacity: 0; - -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } @@ -2722,190 +1293,81 @@ } .zoomIn { - -webkit-animation-name: zoomIn; animation-name: zoomIn; } -@-webkit-keyframes zoomInDown { - from { - opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); - transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - } - - 60% { - opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); - transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - } -} - @keyframes zoomInDown { from { opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInDown { - -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } -@-webkit-keyframes zoomInLeft { - from { - opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); - transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - } - - 60% { - opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); - transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - } -} - @keyframes zoomInLeft { from { opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInLeft { - -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } -@-webkit-keyframes zoomInRight { - from { - opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); - transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - } - - 60% { - opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); - transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - } -} - @keyframes zoomInRight { from { opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInRight { - -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } -@-webkit-keyframes zoomInUp { - from { - opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); - transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - } - - 60% { - opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); - transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - } -} - @keyframes zoomInUp { from { opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInUp { - -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } -@-webkit-keyframes zoomOut { - from { - opacity: 1; - } - - 50% { - opacity: 0; - -webkit-transform: scale3d(.3, .3, .3); - transform: scale3d(.3, .3, .3); - } - - to { - opacity: 0; - } -} - @keyframes zoomOut { from { opacity: 1; @@ -2913,7 +1375,6 @@ 50% { opacity: 0; - -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } @@ -2923,418 +1384,264 @@ } .zoomOut { - -webkit-animation-name: zoomOut; animation-name: zoomOut; } -@-webkit-keyframes zoomOutDown { - 40% { - opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); - transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - } - - to { - opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); - transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); - -webkit-transform-origin: center bottom; - transform-origin: center bottom; - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - } -} - @keyframes zoomOutDown { 40% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); - -webkit-transform-origin: center bottom; transform-origin: center bottom; - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutDown { - -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } -@-webkit-keyframes zoomOutLeft { - 40% { - opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); - transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); - } - - to { - opacity: 0; - -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); - transform: scale(.1) translate3d(-2000px, 0, 0); - -webkit-transform-origin: left center; - transform-origin: left center; - } -} - @keyframes zoomOutLeft { 40% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity: 0; - -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); - -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { - -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } -@-webkit-keyframes zoomOutRight { - 40% { - opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); - transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); - } - - to { - opacity: 0; - -webkit-transform: scale(.1) translate3d(2000px, 0, 0); - transform: scale(.1) translate3d(2000px, 0, 0); - -webkit-transform-origin: right center; - transform-origin: right center; - } -} - @keyframes zoomOutRight { 40% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity: 0; - -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); - -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { - -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } -@-webkit-keyframes zoomOutUp { - 40% { - opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); - transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - } - - to { - opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); - transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); - -webkit-transform-origin: center bottom; - transform-origin: center bottom; - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - } -} - @keyframes zoomOutUp { 40% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); - -webkit-transform-origin: center bottom; transform-origin: center bottom; - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutUp { - -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } -@-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); } } .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); } } .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); } } .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); } } .slideInUp { - -webkit-animation-name: slideInUp; animation-name: slideInUp; } -@-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); } } .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); } } .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); } } .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); } } .slideOutUp { - -webkit-animation-name: slideOutUp; animation-name: slideOutUp; -} \ No newline at end of file +} + +// Own animations + +.greenFade { + animation-name: greenFade; +} + +@keyframes greenFade { + from { + background-color: transparent; + } + + to { + background-color: #81e27d; + } +} + +.redFade { + animation-name: redFade; +} + +@keyframes redFade { + from { + background-color: transparent; + } + + to { + background-color: #ee5649; + } +} + +.redCircleFade { + animation-name: redCircleFade; +} + +@keyframes redCircleFade { + 0% { + background-color: transparent; + } + + 50% { + background-color: #ee5649; + } + + 100% { + background-color: transparent; + } +} + +.greenCircleFade { + animation-name: greenCircleFade; +} + +@keyframes greenCircleFade { + 0% { + background-color: transparent; + } + + 50% { + background-color: #81e27d; + } + + 100% { + background-color: transparent; + } +} diff --git a/styles.css b/styles.css index 0485e87..8088e03 100755 --- a/styles.css +++ b/styles.css @@ -185,2364 +185,996 @@ iframe { * Copyright (c) 2016 Daniel Eden */ .animated { - -webkit-animation-duration: 0.5s; animation-duration: 0.5s; - -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { - -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { - -webkit-animation-duration: 2s; + animation-duration: 2s; } + +.animated.medium-duration { animation-duration: 2s; } .animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { - -webkit-animation-duration: .75s; animation-duration: .75s; } -@-webkit-keyframes bounce { - from, 20%, 53%, 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); - -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); - transform: translate3d(0, -30px, 0); } - 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); - transform: translate3d(0, -15px, 0); } - 90% { - -webkit-transform: translate3d(0, -4px, 0); - transform: translate3d(0, -4px, 0); } } - @keyframes bounce { from, 20%, 53%, 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); - -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); transform: translate3d(0, -30px, 0); } 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); transform: translate3d(0, -15px, 0); } 90% { - -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } - .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; } } - .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); } } - .pulse { - -webkit-animation-name: pulse; animation-name: pulse; } -@-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 heartBeat { + 0% { + transform: scale(1); } + 14% { + transform: scale(1.3); } + 28% { + transform: scale(1); } + 42% { + transform: scale(1.3); } + 70% { + transform: scale(1); } } +.heartBeat { + animation-name: heartBeat; + animation-duration: calc(var(--animate-duration) * 1.3); + animation-timing-function: ease-in-out; } @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); } } - .rubberBand { - -webkit-animation-name: rubberBand; animation-name: rubberBand; } -@-webkit-keyframes shake { - 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 shake { 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); } } - .shake { - -webkit-animation-name: shake; animation-name: shake; } -@-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); } } - .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); } } - .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); } } - .tada { - -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ -@-webkit-keyframes wobble { - from { - -webkit-transform: none; - transform: none; } - 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: none; - transform: none; } } - @keyframes wobble { from { - -webkit-transform: none; transform: none; } 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: none; transform: none; } } - .wobble { - -webkit-animation-name: wobble; animation-name: wobble; } -@-webkit-keyframes jello { - from, 11.1%, to { - -webkit-transform: none; - transform: none; } - 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.39062deg) skewY(0.39062deg); - transform: skewX(0.39062deg) skewY(0.39062deg); } - 88.8% { - -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); - transform: skewX(-0.19531deg) skewY(-0.19531deg); } } - @keyframes jello { from, 11.1%, to { - -webkit-transform: none; transform: none; } 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.39062deg) skewY(0.39062deg); - transform: skewX(0.39062deg) skewY(0.39062deg); } + transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { - -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); - transform: skewX(-0.19531deg) skewY(-0.19531deg); } } - + transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .jello { - -webkit-animation-name: jello; animation-name: jello; - -webkit-transform-origin: center; transform-origin: center; } -@-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); } } - .bounceIn { - -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); - transform: translate3d(0, -3000px, 0); } - 60% { - opacity: 1; - -webkit-transform: translate3d(0, 25px, 0); - transform: translate3d(0, 25px, 0); } - 75% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); } - 90% { - -webkit-transform: translate3d(0, 5px, 0); - transform: translate3d(0, 5px, 0); } - to { - -webkit-transform: none; - transform: none; } } - @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); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; - -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { - -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { - -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { - -webkit-transform: none; transform: none; } } - .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); - transform: translate3d(-3000px, 0, 0); } - 60% { - opacity: 1; - -webkit-transform: translate3d(25px, 0, 0); - transform: translate3d(25px, 0, 0); } - 75% { - -webkit-transform: translate3d(-10px, 0, 0); - transform: translate3d(-10px, 0, 0); } - 90% { - -webkit-transform: translate3d(5px, 0, 0); - transform: translate3d(5px, 0, 0); } - to { - -webkit-transform: none; - transform: none; } } - @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); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; - -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { - -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { - -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { - -webkit-transform: none; transform: none; } } - .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); - transform: translate3d(3000px, 0, 0); } - 60% { - opacity: 1; - -webkit-transform: translate3d(-25px, 0, 0); - transform: translate3d(-25px, 0, 0); } - 75% { - -webkit-transform: translate3d(10px, 0, 0); - transform: translate3d(10px, 0, 0); } - 90% { - -webkit-transform: translate3d(-5px, 0, 0); - transform: translate3d(-5px, 0, 0); } - to { - -webkit-transform: none; - transform: none; } } - @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); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; - -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { - -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { - -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { - -webkit-transform: none; transform: none; } } - .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); - transform: translate3d(0, 3000px, 0); } - 60% { - opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); } - 75% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); } - 90% { - -webkit-transform: translate3d(0, -5px, 0); - transform: translate3d(0, -5px, 0); } - 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); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { - -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { - -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { - -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } - .bounceInUp { - -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } -@-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); } } - .bounceOut { - -webkit-animation-name: bounceOut; animation-name: bounceOut; } -@-webkit-keyframes bounceOutDown { - 20% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); } - 40%, 45% { - opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); } - to { - opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); } } - @keyframes bounceOutDown { 20% { - -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } - .bounceOutDown { - -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } -@-webkit-keyframes bounceOutLeft { - 20% { - opacity: 1; - -webkit-transform: translate3d(20px, 0, 0); - transform: translate3d(20px, 0, 0); } - to { - opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); } } - @keyframes bounceOutLeft { 20% { opacity: 1; - -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } - .bounceOutLeft { - -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } -@-webkit-keyframes bounceOutRight { - 20% { - opacity: 1; - -webkit-transform: translate3d(-20px, 0, 0); - transform: translate3d(-20px, 0, 0); } - to { - opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); } } - @keyframes bounceOutRight { 20% { opacity: 1; - -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } - .bounceOutRight { - -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } -@-webkit-keyframes bounceOutUp { - 20% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); } - 40%, 45% { - opacity: 1; - -webkit-transform: translate3d(0, 20px, 0); - transform: translate3d(0, 20px, 0); } - to { - opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); } } - @keyframes bounceOutUp { 20% { - -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; - -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } - .bounceOutUp { - -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } -@-webkit-keyframes fadeIn { - from { - opacity: 0; } - to { - opacity: 1; } } - @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } - .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: none; - transform: none; } } - @keyframes fadeInDown { from { opacity: 0; - -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; - -webkit-transform: none; transform: none; } } - .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: none; - transform: none; } } - @keyframes fadeInDownBig { from { opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; - -webkit-transform: none; transform: none; } } - .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: none; - transform: none; } } - @keyframes fadeInLeft { from { opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; - -webkit-transform: none; transform: none; } } - .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: none; - transform: none; } } - @keyframes fadeInLeftBig { from { opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; - -webkit-transform: none; transform: none; } } - .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: none; - transform: none; } } - @keyframes fadeInRight { from { opacity: 0; - -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; - -webkit-transform: none; transform: none; } } - .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: none; - transform: none; } } - @keyframes fadeInRightBig { from { opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; - -webkit-transform: none; transform: none; } } - .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: none; - transform: none; } } - @keyframes fadeInUp { from { opacity: 0; - -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; - -webkit-transform: none; transform: none; } } - .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: none; - transform: none; } } - @keyframes fadeInUpBig { from { opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; - -webkit-transform: none; transform: none; } } - .fadeInUpBig { - -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } -@-webkit-keyframes fadeOut { - from { - opacity: 1; } - to { - opacity: 0; } } - @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } - .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); } } - .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); } } - .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); } } - .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); } } - .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); } } - .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); } } - .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); } } - .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); } } - .fadeOutUpBig { - -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } -@-webkit-keyframes flip { - from { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); - transform: perspective(400px) rotate3d(0, 1, 0, -360deg); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; } - 40% { - -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); - transform: perspective(400px) 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) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); - transform: perspective(400px) 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); - transform: perspective(400px) scale3d(0.95, 0.95, 0.95); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; } - to { - -webkit-transform: perspective(400px); - transform: perspective(400px); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; } } - @keyframes flip { from { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); - -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { - -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) 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) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) 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); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); - -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { - -webkit-transform: perspective(400px); transform: perspective(400px); - -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } - .animated.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); } } - .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); } } - .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; } } - .flipOutX { - -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; } } - .flipOutY { - -webkit-backface-visibility: visible !important; backface-visibility: visible !important; - -webkit-animation-name: flipOutY; animation-name: flipOutY; } -@-webkit-keyframes lightSpeedIn { - 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); - opacity: 1; } - to { - -webkit-transform: none; - transform: none; - opacity: 1; } } - @keyframes lightSpeedIn { 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); opacity: 1; } to { - -webkit-transform: none; transform: none; opacity: 1; } } - .lightSpeedIn { - -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; - -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } -@-webkit-keyframes lightSpeedOut { - from { - opacity: 1; } - to { - -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); - transform: translate3d(100%, 0, 0) skewX(30deg); - opacity: 0; } } - @keyframes lightSpeedOut { from { opacity: 1; } to { - -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } - .lightSpeedOut { - -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; - -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } -@-webkit-keyframes rotateIn { - from { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, -200deg); - transform: rotate3d(0, 0, 1, -200deg); - opacity: 0; } - to { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: none; - transform: none; - opacity: 1; } } - @keyframes rotateIn { from { - -webkit-transform-origin: center; transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { - -webkit-transform-origin: center; transform-origin: center; - -webkit-transform: none; transform: none; opacity: 1; } } - .rotateIn { - -webkit-animation-name: rotateIn; animation-name: rotateIn; } -@-webkit-keyframes rotateInDownLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; } - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: none; - transform: none; - opacity: 1; } } - @keyframes rotateInDownLeft { from { - -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { - -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: none; transform: none; opacity: 1; } } - .rotateInDownLeft { - -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } -@-webkit-keyframes rotateInDownRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; } - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: none; - transform: none; - opacity: 1; } } - @keyframes rotateInDownRight { from { - -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { - -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: none; transform: none; opacity: 1; } } - .rotateInDownRight { - -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } -@-webkit-keyframes rotateInUpLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; } - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: none; - transform: none; - opacity: 1; } } - @keyframes rotateInUpLeft { from { - -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { - -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: none; transform: none; opacity: 1; } } - .rotateInUpLeft { - -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } -@-webkit-keyframes rotateInUpRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -90deg); - transform: rotate3d(0, 0, 1, -90deg); - opacity: 0; } - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: none; - transform: none; - opacity: 1; } } - @keyframes rotateInUpRight { from { - -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { - -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: none; transform: none; opacity: 1; } } - .rotateInUpRight { - -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } -@-webkit-keyframes rotateOut { - from { - -webkit-transform-origin: center; - transform-origin: center; - opacity: 1; } - to { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, 200deg); - transform: rotate3d(0, 0, 1, 200deg); - opacity: 0; } } - @keyframes rotateOut { from { - -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { - -webkit-transform-origin: center; transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } - .rotateOut { - -webkit-animation-name: rotateOut; animation-name: rotateOut; } -@-webkit-keyframes rotateOutDownLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - opacity: 1; } - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; } } - @keyframes rotateOutDownLeft { from { - -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { - -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } - .rotateOutDownLeft { - -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } -@-webkit-keyframes rotateOutDownRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - opacity: 1; } - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; } } - @keyframes rotateOutDownRight { from { - -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { - -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } - .rotateOutDownRight { - -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } -@-webkit-keyframes rotateOutUpLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - opacity: 1; } - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; } } - @keyframes rotateOutUpLeft { from { - -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { - -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } - .rotateOutUpLeft { - -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } -@-webkit-keyframes rotateOutUpRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - opacity: 1; } - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 90deg); - transform: rotate3d(0, 0, 1, 90deg); - opacity: 0; } } - @keyframes rotateOutUpRight { from { - -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { - -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } - .rotateOutUpRight { - -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } -@-webkit-keyframes hinge { - 0% { - -webkit-transform-origin: top left; - transform-origin: top left; - -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-transform-origin: top left; - transform-origin: top left; - -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-transform-origin: top left; - transform-origin: top left; - -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-transform-origin: top left; transform-origin: top left; - -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-transform-origin: top left; transform-origin: top left; - -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-transform-origin: top left; transform-origin: top left; - -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; } } - .hinge { - -webkit-animation-name: hinge; animation-name: hinge; } /* 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: none; - transform: none; } } - @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: none; transform: none; } } - .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); } } - .rollOut { - -webkit-animation-name: rollOut; animation-name: rollOut; } -@-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; } } - .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); } } - .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); } } - .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); } } - .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); } } - .zoomInUp { - -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } -@-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; } } - .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-transform-origin: center bottom; - transform-origin: center bottom; - -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-transform-origin: center bottom; transform-origin: center bottom; - -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); } } - .zoomOutDown { - -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } -@-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); - -webkit-transform-origin: left center; - transform-origin: left center; } } - @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); - -webkit-transform-origin: left center; transform-origin: left center; } } - .zoomOutLeft { - -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } -@-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); - -webkit-transform-origin: right center; - transform-origin: right center; } } - @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); - -webkit-transform-origin: right center; transform-origin: right center; } } - .zoomOutRight { - -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } -@-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-transform-origin: center bottom; - transform-origin: center bottom; - -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-transform-origin: center bottom; transform-origin: center bottom; - -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); } } - .zoomOutUp { - -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } -@-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); } } - .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); } } - .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); } } - .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); } } - .slideInUp { - -webkit-animation-name: slideInUp; animation-name: slideInUp; } -@-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); } } - .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); } } - .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); } } - .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); } } - .slideOutUp { - -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } +.greenFade { + animation-name: greenFade; } + +@keyframes greenFade { + from { + background-color: transparent; } + to { + background-color: #81e27d; } } +.redFade { + animation-name: redFade; } + +@keyframes redFade { + from { + background-color: transparent; } + to { + background-color: #ee5649; } } +.redCircleFade { + animation-name: redCircleFade; } + +@keyframes redCircleFade { + 0% { + background-color: transparent; } + 50% { + background-color: #ee5649; } + 100% { + background-color: transparent; } } +.greenCircleFade { + animation-name: greenCircleFade; } + +@keyframes greenCircleFade { + 0% { + background-color: transparent; } + 50% { + background-color: #81e27d; } + 100% { + background-color: transparent; } } .container-fluid, .container { box-sizing: border-box; } @@ -2748,10 +1380,13 @@ iframe { @media only screen and (min-width: 48em) { .sm-hidden { display: block; } + .container { width: 46rem; } + .xs-col-table { display: inherit; } + .col-sm, .col-sm-1, .col-sm-2, @@ -2768,103 +1403,140 @@ iframe { box-sizing: border-box; flex: 0 0 auto; padding-right: 1rem; } + .col-sm { flex-grow: 1; flex-basis: 0; max-width: 100%; } + .col-sm-1 { flex-basis: 8.333%; max-width: 8.333%; } + .col-sm-2 { flex-basis: 16.667%; max-width: 16.667%; } + .col-sm-3 { flex-basis: 25%; max-width: 25%; } + .col-sm-4 { flex-basis: 33.333%; max-width: 33.333%; } + .col-sm-5 { flex-basis: 41.667%; max-width: 41.667%; } + .col-sm-6 { flex-basis: 50%; max-width: 50%; } + .col-sm-7 { flex-basis: 58.333%; max-width: 58.333%; } + .col-sm-8 { flex-basis: 66.667%; max-width: 66.667%; } + .col-sm-9 { flex-basis: 75%; max-width: 75%; } + .col-sm-10 { flex-basis: 83.333%; max-width: 83.333%; } + .col-sm-11 { flex-basis: 91.667%; max-width: 91.667%; } + .col-sm-12 { flex-basis: 100%; max-width: 100%; } + .col-sm-offset-1 { margin-left: 8.333%; } + .col-sm-offset-2 { margin-left: 16.667%; } + .col-sm-offset-3 { margin-left: 25%; } + .col-sm-offset-4 { margin-left: 33.333%; } + .col-sm-offset-5 { margin-left: 41.667%; } + .col-sm-offset-6 { margin-left: 50%; } + .col-sm-offset-7 { margin-left: 58.333%; } + .col-sm-offset-8 { margin-left: 66.667%; } + .col-sm-offset-9 { margin-left: 75%; } + .col-sm-offset-10 { margin-left: 83.333%; } + .col-sm-offset-11 { margin-left: 91.667%; } + .start-sm { justify-content: flex-start; text-align: start; } + .center-sm { justify-content: center; text-align: center; } + .end-sm { justify-content: flex-end; text-align: end; } + .top-sm { align-items: flex-start; } + .middle-sm { align-items: center; } + .bottom-sm { align-items: flex-end; } + .around-sm { justify-content: space-around; } + .between-sm { justify-content: space-between; } + .first-sm { order: -1; } + .last-sm { order: 1; } } - @media only screen and (min-width: 62em) { .col-simple .row { flex-direction: row; } .col-simple .col-xs-12 { flex-basis: 100%; } + .md-hidden { display: block; } + .container { width: 61rem; } + .md-col-table { display: inherit; } + .col-md, .col-md-1, .col-md-2, @@ -2881,99 +1553,135 @@ iframe { box-sizing: border-box; flex: 0 0 auto; padding-right: 1rem; } + .col-md { flex-grow: 1; flex-basis: 0; max-width: 100%; } + .col-md-1 { flex-basis: 8.333%; max-width: 8.333%; } + .col-md-2 { flex-basis: 16.667%; max-width: 16.667%; } + .col-md-3 { flex-basis: 25%; max-width: 25%; } + .col-md-4 { flex-basis: 33.333%; max-width: 33.333%; } + .col-md-5 { flex-basis: 41.667%; max-width: 41.667%; } + .col-md-6 { flex-basis: 50%; max-width: 50%; } + .col-md-7 { flex-basis: 58.333%; max-width: 58.333%; } + .col-md-8 { flex-basis: 66.667%; max-width: 66.667%; } + .col-md-9 { flex-basis: 75%; max-width: 75%; } + .col-md-10 { flex-basis: 83.333%; max-width: 83.333%; } + .col-md-11 { flex-basis: 91.667%; max-width: 91.667%; } + .col-md-12 { flex-basis: 100%; max-width: 100%; } + .col-md-offset-1 { margin-left: 8.333%; } + .col-md-offset-2 { margin-left: 16.667%; } + .col-md-offset-3 { margin-left: 25%; } + .col-md-offset-4 { margin-left: 33.333%; } + .col-md-offset-5 { margin-left: 41.667%; } + .col-md-offset-6 { margin-left: 50%; } + .col-md-offset-7 { margin-left: 58.333%; } + .col-md-offset-8 { margin-left: 66.667%; } + .col-md-offset-9 { margin-left: 75%; } + .col-md-offset-10 { margin-left: 83.333%; } + .col-md-offset-11 { margin-left: 91.667%; } + .start-md { justify-content: flex-start; text-align: start; } + .center-md { justify-content: center; text-align: center; } + .end-md { justify-content: flex-end; text-align: end; } + .top-md { align-items: flex-start; } + .middle-md { align-items: center; } + .bottom-md { align-items: flex-end; } + .around-md { justify-content: space-around; } + .between-md { justify-content: space-between; } + .first-md { order: -1; } + .last-md { order: 1; } } - @media only screen and (min-width: 75em) { .lg-hidden { display: block; } + .container { width: 71rem; } + .lg-col-table { display: inherit; } + .col-lg, .col-lg-1, .col-lg-2, @@ -2990,92 +1698,125 @@ iframe { box-sizing: border-box; flex: 0 0 auto; padding-right: 1rem; } + .col-lg { flex-grow: 1; flex-basis: 0; max-width: 100%; } + .col-lg-1 { flex-basis: 8.333%; max-width: 8.333%; } + .col-lg-2 { flex-basis: 16.667%; max-width: 16.667%; } + .col-lg-3 { flex-basis: 25%; max-width: 25%; } + .col-lg-4 { flex-basis: 33.333%; max-width: 33.333%; } + .col-lg-5 { flex-basis: 41.667%; max-width: 41.667%; } + .col-lg-6 { flex-basis: 50%; max-width: 50%; } + .col-lg-7 { flex-basis: 58.333%; max-width: 58.333%; } + .col-lg-8 { flex-basis: 66.667%; max-width: 66.667%; } + .col-lg-9 { flex-basis: 75%; max-width: 75%; } + .col-lg-10 { flex-basis: 83.333%; max-width: 83.333%; } + .col-lg-11 { flex-basis: 91.667%; max-width: 91.667%; } + .col-lg-12 { flex-basis: 100%; max-width: 100%; } + .col-lg-offset-1 { margin-left: 8.333%; } + .col-lg-offset-2 { margin-left: 16.667%; } + .col-lg-offset-3 { margin-left: 25%; } + .col-lg-offset-4 { margin-left: 33.333%; } + .col-lg-offset-5 { margin-left: 41.667%; } + .col-lg-offset-6 { margin-left: 50%; } + .col-lg-offset-7 { margin-left: 58.333%; } + .col-lg-offset-8 { margin-left: 66.667%; } + .col-lg-offset-9 { margin-left: 75%; } + .col-lg-offset-10 { margin-left: 83.333%; } + .col-lg-offset-11 { margin-left: 91.667%; } + .start-lg { justify-content: flex-start; text-align: start; } + .center-lg { justify-content: center; text-align: center; } + .end-lg { justify-content: flex-end; text-align: end; } + .top-lg { align-items: flex-start; } + .middle-lg { align-items: center; } + .bottom-lg { align-items: flex-end; } + .around-lg { justify-content: space-around; } + .between-lg { justify-content: space-between; } + .first-lg { order: -1; } + .last-lg { order: 1; } } - .portlet-body > article { padding: 0; } @@ -3233,7 +1974,6 @@ div.sticky, section.sticky { @media (max-width: 768px) { .form-group { flex-direction: column; } } - .wf-100 { width: 100%; } @@ -3308,7 +2048,6 @@ p { background-position: 0; } 100% { background-position: -100%; } } - .tooltip { cursor: pointer; color: var(--box-highlight); @@ -3345,7 +2084,6 @@ p { -webkit-transform: perspective(120px) rotateY(180deg); } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); } } - @keyframes sk-rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); @@ -3356,7 +2094,6 @@ p { 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } - .spinner-2 { text-align: center; } .spinner-2 > div { @@ -3379,7 +2116,6 @@ p { -webkit-transform: scale(0); } 40% { -webkit-transform: scale(1); } } - @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); @@ -3387,7 +2123,6 @@ p { 40% { -webkit-transform: scale(1); transform: scale(1); } } - .spinner-3 { width: 40px; height: 40px; @@ -3403,7 +2138,6 @@ p { 100% { -webkit-transform: scale(1); opacity: 0; } } - @keyframes sk-scaleout { 0% { -webkit-transform: scale(0); @@ -3412,7 +2146,6 @@ p { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } - canvas { background: #fff; user-select: none; } @@ -3421,23 +2154,18 @@ canvas { form li { margin: 5px 0 5px 0; } - form td { white-space: nowrap; padding-bottom: 5px; } form td textarea + i { vertical-align: top; } - form label { font-size: .9rem; color: black; } - form i + i { margin-left: 3px; } - form .layout td + td { padding-left: 5px; } - form .list { font-size: 1rem; } form .list td { @@ -3471,17 +2199,14 @@ img.frame-1 { border: 1px solid var(--box-border); box-sizing: border-box; width: 100%; } - img.frame-2 { border: 1px solid var(--box-border); background: #fff; box-sizing: border-box; width: 100%; } - img.rounded { border-radius: 50%; background: #fff; } - img.bordered { border: 1px solid var(--box-border); } @@ -3700,10 +2425,10 @@ input[type="datetime-local"] { height: auto; box-shadow: none; /* - &:hover, &:focus { - background: var(--button-colored-background-hover); - } - */ } + &:hover, &:focus { + background: var(--button-colored-background-hover); + } + */ } .inputWrapper .textWrapper { flex: 1; position: relative; } @@ -3738,10 +2463,8 @@ input[type="datetime-local"] { .clickPopup label + input { display: none; } - .clickPopup .more-functions { padding: 0 1rem 0 1rem; } - .clickPopup .popup { box-sizing: border-box; padding: .5rem 1rem .5rem 1rem; @@ -3785,9 +2508,9 @@ input[type="datetime-local"] { .clickPopup .popup > li a { display: block; /* - &:hover, &:focus { - } - */ } + &:hover, &:focus { + } + */ } .clickPopup .popup i { flex-grow: 0; } @@ -3832,7 +2555,6 @@ textarea:invalid, input:invalid { input:valid ~ i.ok { display: inline-block !important; } - input:valid ~ i.error { display: none !important; } @@ -3883,7 +2605,6 @@ label.radio .checkmark { height: 5px; border-radius: 50%; background: #fff; } - label.checkbox .checkmark:after { top: 2px; left: 4px; @@ -4046,20 +2767,16 @@ select.plain { flex-grow: 1; } .more-container > label i { flex-grow: 0; } - .more-container > input { display: none; } - .more-container > input:checked + label { border-bottom: none; margin-bottom: 1rem; } .more-container > input:checked + label .expand { transition: all .3s ease; transform: rotateZ(90deg); } - .more-container > input:checked ~ div { display: block; } - .more-container > div { display: none; } @@ -4112,7 +2829,6 @@ select.plain { left: -300%; } 100% { left: -400%; } } - div.slider-1 { overflow: hidden; } div.slider-1 figure { @@ -4194,7 +2910,7 @@ div.slider-1 { width: 100%; } @keyframes carousel { - 0%, 17.5% { + 0%, 17.5% { transform: translateZ(-35vw) rotateY(0); } 27.5%, 45% { transform: translateZ(-35vw) rotateY(-120deg); } @@ -4202,7 +2918,6 @@ div.slider-1 { transform: translateZ(-35vw) rotateY(-240deg); } 82.5%, 100% { transform: translateZ(-35vw) rotateY(-360deg); } } - pre { border: 1px solid var(--box-border); background: #ccc; @@ -4274,16 +2989,12 @@ blockquote { top: 50%; margin-top: -20px; left: 100%; } - .crumbs-1 li.active:not(:last-child):after, .crumbs-1 li:hover:not(:last-child):after { color: var(--text-on-background-color-2); } - .crumbs-1 li.active:not(:last-child):after { border-left: 14px solid var(--button-colored-background); } - .crumbs-1 li:hover:not(:last-child):after { border-left: 14px solid var(--button-colored-background-hover); } - .crumbs-1 :last-child:before { border: none; } @@ -4536,27 +3247,25 @@ body > nav { @media only screen and (max-width: 800px) { #nav-trigger:not(:checked) + nav { width: 0%; } + #nav-trigger:checked + nav { width: auto; min-width: 250px; } } - @media only screen and (max-width: 500px) { #nav-trigger:checked + nav { width: 100%; } + #nav-trigger:checked ~ main { display: none; } } - .pagination li { display: inline-block; } .pagination li + li { margin-left: .5rem; } - .pagination a { display: inline-block; border-radius: 3px; background: #ccc; padding: 5px 10px 5px 10px; } - .pagination .active, .pagination a:hover, .pagination a:active { color: #000; background: #fff; } @@ -4613,7 +3322,6 @@ body > nav { background-position: 0 0; } 100% { background-position: 50px 50px; } } - .noanimation > span > span, .noanimation > span:after { -webkit-animation: none; } @@ -4750,7 +3458,6 @@ section header > h1 { padding-bottom: 5px; font-size: 1.1em; border-bottom: 1px solid #e1e1e1; } - section > h2 { box-sizing: border-box; font-size: 1.2em; @@ -4763,7 +3470,6 @@ section > h2 { .pagebreak { page-break-after: always; display: block; } } - .tabview .tab-links { color: #000; padding: 5px 0 0 0; } @@ -4787,7 +3493,6 @@ section > h2 { cursor: default; } .tabview .tab-links li { display: inline-block; } - .tabview .tab-content { display: flex; flex: 1; } @@ -4799,10 +3504,8 @@ section > h2 { display: flex; flex: 1; flex-direction: column; } - .tabview .tab { max-width: 100%; } - .tabview.right > .box { order: 2; } @@ -4818,16 +3521,13 @@ section > h2 { background: var(--button-colored-background); } .tab-1 .tab-links li { margin: 0 5px 0 0; } - .tab-1 .tab { max-width: 100%; } - .tab-1 .tab-content { box-sizing: border-box; border: 1px solid var(--button-colored-background); background: #fff; padding: 10px; } - .tab-1.left, .tab-1.right { display: flex; } .tab-1.left .tab-links, .tab-1.right .tab-links { @@ -4872,23 +3572,17 @@ section > h2 { table.fixed { table-layout: fixed; } - table input[type=radio]:checked + i { color: var(--button-colored-background); } - table input[type=checkbox]:checked + label i { color: var(--button-colored-background); } - table .order-up, table .order-down { cursor: pointer; } - table .sort-asc, table .sort-desc, table .filter { padding: 0 2px 0 2px; cursor: pointer; } - table:not([id]) > thead .sort-asc, table:not([id]) > thead .sort-desc { display: none; } - table.default.sticky { position: relative; } table.default.sticky thead th, table.default.sticky thead td { @@ -4898,7 +3592,6 @@ table.default.sticky { z-index: 2; } table.default.sticky thead th > *, table.default.sticky thead td > * { vertical-align: middle; } - table.default { width: 100%; max-width: 100%; @@ -4961,11 +3654,9 @@ table.default { table.default tfoot td { text-align: center; padding-top: 10px; } - table.list th { text-align: left; padding: 2px 0 2px 0; } - table.list td { padding: 2px 5px 2px 5px; } @@ -4973,7 +3664,6 @@ thead input[type=radio] { padding: 0; margin: 0; display: none; } - thead i.fa { color: #888; } @@ -5051,7 +3741,6 @@ thead i.fa { font-weight: bold; } table.table tfoot { display: none; } } - span.tag { cursor: pointer; border-radius: 4px;