diff options
| author | Andrew Lee <alee14498@protonmail.com> | 2020-07-26 23:19:28 -0400 |
|---|---|---|
| committer | Andrew Lee <alee14498@protonmail.com> | 2020-07-26 23:19:28 -0400 |
| commit | 3a3a2e958dd4cd19d3f7da61aa61f26f3574a905 (patch) | |
| tree | b2568eaf8d301bace2c47f67670cd8f2006b478b /assets/css/animate.css | |
| parent | 6c999c3c88e9f894fc9746e01bf22be24f351d9b (diff) | |
| download | personal-website-3a3a2e958dd4cd19d3f7da61aa61f26f3574a905.tar.gz personal-website-3a3a2e958dd4cd19d3f7da61aa61f26f3574a905.tar.bz2 personal-website-3a3a2e958dd4cd19d3f7da61aa61f26f3574a905.zip | |
Moved profile links to index and upgraded animate.css
Diffstat (limited to 'assets/css/animate.css')
| -rw-r--r-- | assets/css/animate.css | 1729 |
1 files changed, 1089 insertions, 640 deletions
diff --git a/assets/css/animate.css b/assets/css/animate.css index 1c5b3e7..eea2814 100644 --- a/assets/css/animate.css +++ b/assets/css/animate.css @@ -1,18 +1,120 @@ -@charset "UTF-8"; +@charset "UTF-8"; /*! - * animate.css -https://daneden.github.io/animate.css/ - * Version - 3.7.2 + * animate.css - https://animate.style/ + * Version - 4.0.0 * Licensed under the MIT license - http://opensource.org/licenses/MIT * - * Copyright (c) 2019 Daniel Eden + * Copyright (c) 2020 Animate.css */ +:root { + --animate-duration: 1s; + --animate-delay: 1s; + --animate-repeat: 1; +} +.animate__animated { + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-duration: var(--animate-duration); + animation-duration: var(--animate-duration); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} +.animate__animated.animate__infinite { + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.animate__animated.animate__repeat-1 { + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-iteration-count: var(--animate-repeat); + animation-iteration-count: var(--animate-repeat); +} +.animate__animated.animate__repeat-2 { + -webkit-animation-iteration-count: calc(1 * 2); + animation-iteration-count: calc(1 * 2); + -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2); + animation-iteration-count: calc(var(--animate-repeat) * 2); +} +.animate__animated.animate__repeat-3 { + -webkit-animation-iteration-count: calc(1 * 3); + animation-iteration-count: calc(1 * 3); + -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3); + animation-iteration-count: calc(var(--animate-repeat) * 3); +} +.animate__animated.animate__delay-1s { + -webkit-animation-delay: 1s; + animation-delay: 1s; + -webkit-animation-delay: var(--animate-delay); + animation-delay: var(--animate-delay); +} +.animate__animated.animate__delay-2s { + -webkit-animation-delay: calc(1s * 2); + animation-delay: calc(1s * 2); + -webkit-animation-delay: calc(var(--animate-delay) * 2); + animation-delay: calc(var(--animate-delay) * 2); +} +.animate__animated.animate__delay-3s { + -webkit-animation-delay: calc(1s * 3); + animation-delay: calc(1s * 3); + -webkit-animation-delay: calc(var(--animate-delay) * 3); + animation-delay: calc(var(--animate-delay) * 3); +} +.animate__animated.animate__delay-4s { + -webkit-animation-delay: calc(1s * 4); + animation-delay: calc(1s * 4); + -webkit-animation-delay: calc(var(--animate-delay) * 4); + animation-delay: calc(var(--animate-delay) * 4); +} +.animate__animated.animate__delay-5s { + -webkit-animation-delay: calc(1s * 5); + animation-delay: calc(1s * 5); + -webkit-animation-delay: calc(var(--animate-delay) * 5); + animation-delay: calc(var(--animate-delay) * 5); +} +.animate__animated.animate__faster { + -webkit-animation-duration: calc(1s / 2); + animation-duration: calc(1s / 2); + -webkit-animation-duration: calc(var(--animate-duration) / 2); + animation-duration: calc(var(--animate-duration) / 2); +} +.animate__animated.animate__fast { + -webkit-animation-duration: calc(1s * 0.8); + animation-duration: calc(1s * 0.8); + -webkit-animation-duration: calc(var(--animate-duration) * 0.8); + animation-duration: calc(var(--animate-duration) * 0.8); +} +.animate__animated.animate__slow { + -webkit-animation-duration: calc(1s * 2); + animation-duration: calc(1s * 2); + -webkit-animation-duration: calc(var(--animate-duration) * 2); + animation-duration: calc(var(--animate-duration) * 2); +} +.animate__animated.animate__slower { + -webkit-animation-duration: calc(1s * 3); + animation-duration: calc(1s * 3); + -webkit-animation-duration: calc(var(--animate-duration) * 3); + animation-duration: calc(var(--animate-duration) * 3); +} +@media print, (prefers-reduced-motion: reduce) { + .animate__animated { + -webkit-animation-duration: 1ms !important; + animation-duration: 1ms !important; + -webkit-transition-duration: 1ms !important; + transition-duration: 1ms !important; + -webkit-animation-iteration-count: 1 !important; + animation-iteration-count: 1 !important; + } + .animate__animated[class*='Out'] { + opacity: 0; + } +} +/* Attention seekers */ @-webkit-keyframes bounce { from, 20%, 53%, - 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); @@ -24,28 +126,33 @@ 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); + -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); + transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -15px, 0); - transform: translate3d(0, -15px, 0); + -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); + transform: translate3d(0, -15px, 0) scaleY(1.05); + } + + 80% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + -webkit-transform: translate3d(0, 0, 0) scaleY(0.95); + transform: translate3d(0, 0, 0) scaleY(0.95); } 90% { - -webkit-transform: translate3d(0, -4px, 0); - transform: translate3d(0, -4px, 0); + -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); + transform: translate3d(0, -4px, 0) scaleY(1.02); } } - @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); @@ -57,30 +164,35 @@ 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); + -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); + transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -15px, 0); - transform: translate3d(0, -15px, 0); + -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); + transform: translate3d(0, -15px, 0) scaleY(1.05); + } + + 80% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + -webkit-transform: translate3d(0, 0, 0) scaleY(0.95); + transform: translate3d(0, 0, 0) scaleY(0.95); } 90% { - -webkit-transform: translate3d(0, -4px, 0); - transform: translate3d(0, -4px, 0); + -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); + transform: translate3d(0, -4px, 0) scaleY(1.02); } } - -.bounce { +.animate__bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } - @-webkit-keyframes flash { from, 50%, @@ -93,7 +205,6 @@ opacity: 0; } } - @keyframes flash { from, 50%, @@ -106,14 +217,11 @@ opacity: 0; } } - -.flash { +.animate__flash { -webkit-animation-name: flash; animation-name: flash; } - /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); @@ -130,7 +238,6 @@ transform: scale3d(1, 1, 1); } } - @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); @@ -147,12 +254,12 @@ transform: scale3d(1, 1, 1); } } - -.pulse { +.animate__pulse { -webkit-animation-name: pulse; animation-name: pulse; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; } - @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); @@ -189,7 +296,6 @@ transform: scale3d(1, 1, 1); } } - @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); @@ -226,13 +332,11 @@ transform: scale3d(1, 1, 1); } } - -.rubberBand { +.animate__rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } - -@-webkit-keyframes shake { +@-webkit-keyframes shakeX { from, to { -webkit-transform: translate3d(0, 0, 0); @@ -256,8 +360,7 @@ transform: translate3d(10px, 0, 0); } } - -@keyframes shake { +@keyframes shakeX { from, to { -webkit-transform: translate3d(0, 0, 0); @@ -281,12 +384,62 @@ transform: translate3d(10px, 0, 0); } } +.animate__shakeX { + -webkit-animation-name: shakeX; + animation-name: shakeX; +} +@-webkit-keyframes shakeY { + from, + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } -.shake { - -webkit-animation-name: shake; - animation-name: shake; + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } } +@keyframes shakeY { + from, + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } +} +.animate__shakeY { + -webkit-animation-name: shakeY; + animation-name: shakeY; +} @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); @@ -318,7 +471,6 @@ transform: translateX(0); } } - @keyframes headShake { 0% { -webkit-transform: translateX(0); @@ -350,14 +502,12 @@ transform: translateX(0); } } - -.headShake { +.animate__headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } - @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); @@ -384,7 +534,6 @@ transform: rotate3d(0, 0, 1, 0deg); } } - @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); @@ -411,14 +560,12 @@ transform: rotate3d(0, 0, 1, 0deg); } } - -.swing { +.animate__swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } - @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); @@ -451,7 +598,6 @@ transform: scale3d(1, 1, 1); } } - @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); @@ -484,14 +630,11 @@ transform: scale3d(1, 1, 1); } } - -.tada { +.animate__tada { -webkit-animation-name: tada; animation-name: tada; } - /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - @-webkit-keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); @@ -528,7 +671,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); @@ -565,12 +707,10 @@ transform: translate3d(0, 0, 0); } } - -.wobble { +.animate__wobble { -webkit-animation-name: wobble; animation-name: wobble; } - @-webkit-keyframes jello { from, 11.1%, @@ -614,7 +754,6 @@ transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } - @keyframes jello { from, 11.1%, @@ -658,14 +797,12 @@ transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } - -.jello { +.animate__jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } - @-webkit-keyframes heartBeat { 0% { -webkit-transform: scale(1); @@ -692,7 +829,6 @@ transform: scale(1); } } - @keyframes heartBeat { 0% { -webkit-transform: scale(1); @@ -719,16 +855,355 @@ transform: scale(1); } } - -.heartBeat { +.animate__heartBeat { -webkit-animation-name: heartBeat; animation-name: heartBeat; - -webkit-animation-duration: 1.3s; - animation-duration: 1.3s; + -webkit-animation-duration: calc(1s * 1.3); + animation-duration: calc(1s * 1.3); + -webkit-animation-duration: calc(var(--animate-duration) * 1.3); + animation-duration: calc(var(--animate-duration) * 1.3); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } +/* Back entrances */ +@-webkit-keyframes backInDown { + 0% { + -webkit-transform: translateY(-1200px) scale(0.7); + transform: translateY(-1200px) scale(0.7); + opacity: 0.7; + } + + 80% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +@keyframes backInDown { + 0% { + -webkit-transform: translateY(-1200px) scale(0.7); + transform: translateY(-1200px) scale(0.7); + opacity: 0.7; + } + + 80% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.animate__backInDown { + -webkit-animation-name: backInDown; + animation-name: backInDown; +} +@-webkit-keyframes backInLeft { + 0% { + -webkit-transform: translateX(-2000px) scale(0.7); + transform: translateX(-2000px) scale(0.7); + opacity: 0.7; + } + + 80% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +@keyframes backInLeft { + 0% { + -webkit-transform: translateX(-2000px) scale(0.7); + transform: translateX(-2000px) scale(0.7); + opacity: 0.7; + } + + 80% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.animate__backInLeft { + -webkit-animation-name: backInLeft; + animation-name: backInLeft; +} +@-webkit-keyframes backInRight { + 0% { + -webkit-transform: translateX(2000px) scale(0.7); + transform: translateX(2000px) scale(0.7); + opacity: 0.7; + } + + 80% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +@keyframes backInRight { + 0% { + -webkit-transform: translateX(2000px) scale(0.7); + transform: translateX(2000px) scale(0.7); + opacity: 0.7; + } + + 80% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.animate__backInRight { + -webkit-animation-name: backInRight; + animation-name: backInRight; +} +@-webkit-keyframes backInUp { + 0% { + -webkit-transform: translateY(1200px) scale(0.7); + transform: translateY(1200px) scale(0.7); + opacity: 0.7; + } + + 80% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +@keyframes backInUp { + 0% { + -webkit-transform: translateY(1200px) scale(0.7); + transform: translateY(1200px) scale(0.7); + opacity: 0.7; + } + + 80% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.animate__backInUp { + -webkit-animation-name: backInUp; + animation-name: backInUp; +} +/* Back exists */ +@-webkit-keyframes backOutDown { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateY(700px) scale(0.7); + transform: translateY(700px) scale(0.7); + opacity: 0.7; + } +} +@keyframes backOutDown { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateY(700px) scale(0.7); + transform: translateY(700px) scale(0.7); + opacity: 0.7; + } +} +.animate__backOutDown { + -webkit-animation-name: backOutDown; + animation-name: backOutDown; +} +@-webkit-keyframes backOutLeft { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateX(-2000px) scale(0.7); + transform: translateX(-2000px) scale(0.7); + opacity: 0.7; + } +} +@keyframes backOutLeft { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateX(-2000px) scale(0.7); + transform: translateX(-2000px) scale(0.7); + opacity: 0.7; + } +} +.animate__backOutLeft { + -webkit-animation-name: backOutLeft; + animation-name: backOutLeft; +} +@-webkit-keyframes backOutRight { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateX(2000px) scale(0.7); + transform: translateX(2000px) scale(0.7); + opacity: 0.7; + } +} +@keyframes backOutRight { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateX(2000px) scale(0.7); + transform: translateX(2000px) scale(0.7); + opacity: 0.7; + } +} +.animate__backOutRight { + -webkit-animation-name: backOutRight; + animation-name: backOutRight; +} +@-webkit-keyframes backOutUp { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateY(-700px) scale(0.7); + transform: translateY(-700px) scale(0.7); + opacity: 0.7; + } +} +@keyframes backOutUp { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateY(-700px) scale(0.7); + transform: translateY(-700px) scale(0.7); + opacity: 0.7; + } +} +.animate__backOutUp { + -webkit-animation-name: backOutUp; + animation-name: backOutUp; +} +/* Bouncing entrances */ @-webkit-keyframes bounceIn { from, 20%, @@ -773,7 +1248,6 @@ transform: scale3d(1, 1, 1); } } - @keyframes bounceIn { from, 20%, @@ -818,14 +1292,14 @@ transform: scale3d(1, 1, 1); } } - -.bounceIn { - -webkit-animation-duration: 0.75s; - animation-duration: 0.75s; +.animate__bounceIn { + -webkit-animation-duration: calc(1s * 0.75); + animation-duration: calc(1s * 0.75); + -webkit-animation-duration: calc(var(--animate-duration) * 0.75); + animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: bounceIn; animation-name: bounceIn; } - @-webkit-keyframes bounceInDown { from, 60%, @@ -838,24 +1312,24 @@ 0% { opacity: 0; - -webkit-transform: translate3d(0, -3000px, 0); - transform: translate3d(0, -3000px, 0); + -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); + transform: translate3d(0, -3000px, 0) scaleY(3); } 60% { opacity: 1; - -webkit-transform: translate3d(0, 25px, 0); - transform: translate3d(0, 25px, 0); + -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); + transform: translate3d(0, 25px, 0) scaleY(0.9); } 75% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); + -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); + transform: translate3d(0, -10px, 0) scaleY(0.95); } 90% { - -webkit-transform: translate3d(0, 5px, 0); - transform: translate3d(0, 5px, 0); + -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); + transform: translate3d(0, 5px, 0) scaleY(0.985); } to { @@ -863,7 +1337,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes bounceInDown { from, 60%, @@ -876,24 +1349,24 @@ 0% { opacity: 0; - -webkit-transform: translate3d(0, -3000px, 0); - transform: translate3d(0, -3000px, 0); + -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); + transform: translate3d(0, -3000px, 0) scaleY(3); } 60% { opacity: 1; - -webkit-transform: translate3d(0, 25px, 0); - transform: translate3d(0, 25px, 0); + -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); + transform: translate3d(0, 25px, 0) scaleY(0.9); } 75% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); + -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); + transform: translate3d(0, -10px, 0) scaleY(0.95); } 90% { - -webkit-transform: translate3d(0, 5px, 0); - transform: translate3d(0, 5px, 0); + -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); + transform: translate3d(0, 5px, 0) scaleY(0.985); } to { @@ -901,12 +1374,10 @@ transform: translate3d(0, 0, 0); } } - -.bounceInDown { +.animate__bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } - @-webkit-keyframes bounceInLeft { from, 60%, @@ -919,24 +1390,24 @@ 0% { opacity: 0; - -webkit-transform: translate3d(-3000px, 0, 0); - transform: translate3d(-3000px, 0, 0); + -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); + transform: translate3d(-3000px, 0, 0) scaleX(3); } 60% { opacity: 1; - -webkit-transform: translate3d(25px, 0, 0); - transform: translate3d(25px, 0, 0); + -webkit-transform: translate3d(25px, 0, 0) scaleX(1); + transform: translate3d(25px, 0, 0) scaleX(1); } 75% { - -webkit-transform: translate3d(-10px, 0, 0); - transform: translate3d(-10px, 0, 0); + -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); + transform: translate3d(-10px, 0, 0) scaleX(0.98); } 90% { - -webkit-transform: translate3d(5px, 0, 0); - transform: translate3d(5px, 0, 0); + -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); + transform: translate3d(5px, 0, 0) scaleX(0.995); } to { @@ -944,7 +1415,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes bounceInLeft { from, 60%, @@ -957,24 +1427,24 @@ 0% { opacity: 0; - -webkit-transform: translate3d(-3000px, 0, 0); - transform: translate3d(-3000px, 0, 0); + -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); + transform: translate3d(-3000px, 0, 0) scaleX(3); } 60% { opacity: 1; - -webkit-transform: translate3d(25px, 0, 0); - transform: translate3d(25px, 0, 0); + -webkit-transform: translate3d(25px, 0, 0) scaleX(1); + transform: translate3d(25px, 0, 0) scaleX(1); } 75% { - -webkit-transform: translate3d(-10px, 0, 0); - transform: translate3d(-10px, 0, 0); + -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); + transform: translate3d(-10px, 0, 0) scaleX(0.98); } 90% { - -webkit-transform: translate3d(5px, 0, 0); - transform: translate3d(5px, 0, 0); + -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); + transform: translate3d(5px, 0, 0) scaleX(0.995); } to { @@ -982,12 +1452,10 @@ transform: translate3d(0, 0, 0); } } - -.bounceInLeft { +.animate__bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } - @-webkit-keyframes bounceInRight { from, 60%, @@ -1000,24 +1468,24 @@ from { opacity: 0; - -webkit-transform: translate3d(3000px, 0, 0); - transform: translate3d(3000px, 0, 0); + -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); + transform: translate3d(3000px, 0, 0) scaleX(3); } 60% { opacity: 1; - -webkit-transform: translate3d(-25px, 0, 0); - transform: translate3d(-25px, 0, 0); + -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); + transform: translate3d(-25px, 0, 0) scaleX(1); } 75% { - -webkit-transform: translate3d(10px, 0, 0); - transform: translate3d(10px, 0, 0); + -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); + transform: translate3d(10px, 0, 0) scaleX(0.98); } 90% { - -webkit-transform: translate3d(-5px, 0, 0); - transform: translate3d(-5px, 0, 0); + -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); + transform: translate3d(-5px, 0, 0) scaleX(0.995); } to { @@ -1025,7 +1493,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes bounceInRight { from, 60%, @@ -1038,24 +1505,24 @@ from { opacity: 0; - -webkit-transform: translate3d(3000px, 0, 0); - transform: translate3d(3000px, 0, 0); + -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); + transform: translate3d(3000px, 0, 0) scaleX(3); } 60% { opacity: 1; - -webkit-transform: translate3d(-25px, 0, 0); - transform: translate3d(-25px, 0, 0); + -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); + transform: translate3d(-25px, 0, 0) scaleX(1); } 75% { - -webkit-transform: translate3d(10px, 0, 0); - transform: translate3d(10px, 0, 0); + -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); + transform: translate3d(10px, 0, 0) scaleX(0.98); } 90% { - -webkit-transform: translate3d(-5px, 0, 0); - transform: translate3d(-5px, 0, 0); + -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); + transform: translate3d(-5px, 0, 0) scaleX(0.995); } to { @@ -1063,12 +1530,10 @@ transform: translate3d(0, 0, 0); } } - -.bounceInRight { +.animate__bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } - @-webkit-keyframes bounceInUp { from, 60%, @@ -1081,24 +1546,24 @@ from { opacity: 0; - -webkit-transform: translate3d(0, 3000px, 0); - transform: translate3d(0, 3000px, 0); + -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); + transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); + -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); + transform: translate3d(0, -20px, 0) scaleY(0.9); } 75% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); + -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); + transform: translate3d(0, 10px, 0) scaleY(0.95); } 90% { - -webkit-transform: translate3d(0, -5px, 0); - transform: translate3d(0, -5px, 0); + -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); + transform: translate3d(0, -5px, 0) scaleY(0.985); } to { @@ -1106,7 +1571,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes bounceInUp { from, 60%, @@ -1119,24 +1583,24 @@ from { opacity: 0; - -webkit-transform: translate3d(0, 3000px, 0); - transform: translate3d(0, 3000px, 0); + -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); + transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); + -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); + transform: translate3d(0, -20px, 0) scaleY(0.9); } 75% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); + -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); + transform: translate3d(0, 10px, 0) scaleY(0.95); } 90% { - -webkit-transform: translate3d(0, -5px, 0); - transform: translate3d(0, -5px, 0); + -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); + transform: translate3d(0, -5px, 0) scaleY(0.985); } to { @@ -1144,12 +1608,11 @@ transform: translate3d(0, 0, 0); } } - -.bounceInUp { +.animate__bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } - +/* Bouncing exits */ @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); @@ -1169,7 +1632,6 @@ transform: scale3d(0.3, 0.3, 0.3); } } - @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); @@ -1189,170 +1651,159 @@ transform: scale3d(0.3, 0.3, 0.3); } } - -.bounceOut { - -webkit-animation-duration: 0.75s; - animation-duration: 0.75s; +.animate__bounceOut { + -webkit-animation-duration: calc(1s * 0.75); + animation-duration: calc(1s * 0.75); + -webkit-animation-duration: calc(var(--animate-duration) * 0.75); + animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: bounceOut; animation-name: bounceOut; } - @-webkit-keyframes bounceOutDown { 20% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); + -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); + transform: translate3d(0, 10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); + -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); + transform: translate3d(0, -20px, 0) scaleY(0.9); } to { opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); + -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); + transform: translate3d(0, 2000px, 0) scaleY(3); } } - @keyframes bounceOutDown { 20% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); + -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); + transform: translate3d(0, 10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); + -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); + transform: translate3d(0, -20px, 0) scaleY(0.9); } to { opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); + -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); + transform: translate3d(0, 2000px, 0) scaleY(3); } } - -.bounceOutDown { +.animate__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); + -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); + transform: translate3d(20px, 0, 0) scaleX(0.9); } to { opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); + -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); + transform: translate3d(-2000px, 0, 0) scaleX(2); } } - @keyframes bounceOutLeft { 20% { opacity: 1; - -webkit-transform: translate3d(20px, 0, 0); - transform: translate3d(20px, 0, 0); + -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); + transform: translate3d(20px, 0, 0) scaleX(0.9); } to { opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); + -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); + transform: translate3d(-2000px, 0, 0) scaleX(2); } } - -.bounceOutLeft { +.animate__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); + -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); + transform: translate3d(-20px, 0, 0) scaleX(0.9); } to { opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); + -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); + transform: translate3d(2000px, 0, 0) scaleX(2); } } - @keyframes bounceOutRight { 20% { opacity: 1; - -webkit-transform: translate3d(-20px, 0, 0); - transform: translate3d(-20px, 0, 0); + -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); + transform: translate3d(-20px, 0, 0) scaleX(0.9); } to { opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); + -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); + transform: translate3d(2000px, 0, 0) scaleX(2); } } - -.bounceOutRight { +.animate__bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } - @-webkit-keyframes bounceOutUp { 20% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); + -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); + transform: translate3d(0, -10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; - -webkit-transform: translate3d(0, 20px, 0); - transform: translate3d(0, 20px, 0); + -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); + transform: translate3d(0, 20px, 0) scaleY(0.9); } to { opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); + -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); + transform: translate3d(0, -2000px, 0) scaleY(3); } } - @keyframes bounceOutUp { 20% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); + -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); + transform: translate3d(0, -10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; - -webkit-transform: translate3d(0, 20px, 0); - transform: translate3d(0, 20px, 0); + -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); + transform: translate3d(0, 20px, 0) scaleY(0.9); } to { opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); + -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); + transform: translate3d(0, -2000px, 0) scaleY(3); } } - -.bounceOutUp { +.animate__bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } - +/* Fading entrances */ @-webkit-keyframes fadeIn { from { opacity: 0; @@ -1362,7 +1813,6 @@ opacity: 1; } } - @keyframes fadeIn { from { opacity: 0; @@ -1372,12 +1822,10 @@ opacity: 1; } } - -.fadeIn { +.animate__fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } - @-webkit-keyframes fadeInDown { from { opacity: 0; @@ -1391,7 +1839,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes fadeInDown { from { opacity: 0; @@ -1405,12 +1852,10 @@ transform: translate3d(0, 0, 0); } } - -.fadeInDown { +.animate__fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } - @-webkit-keyframes fadeInDownBig { from { opacity: 0; @@ -1424,7 +1869,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes fadeInDownBig { from { opacity: 0; @@ -1438,12 +1882,10 @@ transform: translate3d(0, 0, 0); } } - -.fadeInDownBig { +.animate__fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } - @-webkit-keyframes fadeInLeft { from { opacity: 0; @@ -1457,7 +1899,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes fadeInLeft { from { opacity: 0; @@ -1471,12 +1912,10 @@ transform: translate3d(0, 0, 0); } } - -.fadeInLeft { +.animate__fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } - @-webkit-keyframes fadeInLeftBig { from { opacity: 0; @@ -1490,7 +1929,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes fadeInLeftBig { from { opacity: 0; @@ -1504,12 +1942,10 @@ transform: translate3d(0, 0, 0); } } - -.fadeInLeftBig { +.animate__fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } - @-webkit-keyframes fadeInRight { from { opacity: 0; @@ -1523,7 +1959,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes fadeInRight { from { opacity: 0; @@ -1537,12 +1972,10 @@ transform: translate3d(0, 0, 0); } } - -.fadeInRight { +.animate__fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } - @-webkit-keyframes fadeInRightBig { from { opacity: 0; @@ -1556,7 +1989,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes fadeInRightBig { from { opacity: 0; @@ -1570,12 +2002,10 @@ transform: translate3d(0, 0, 0); } } - -.fadeInRightBig { +.animate__fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } - @-webkit-keyframes fadeInUp { from { opacity: 0; @@ -1589,7 +2019,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes fadeInUp { from { opacity: 0; @@ -1603,12 +2032,10 @@ transform: translate3d(0, 0, 0); } } - -.fadeInUp { +.animate__fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } - @-webkit-keyframes fadeInUpBig { from { opacity: 0; @@ -1622,7 +2049,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes fadeInUpBig { from { opacity: 0; @@ -1636,12 +2062,123 @@ transform: translate3d(0, 0, 0); } } - -.fadeInUpBig { +.animate__fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } - +@-webkit-keyframes fadeInTopLeft { + from { + opacity: 0; + -webkit-transform: translate3d(-100%, -100%, 0); + transform: translate3d(-100%, -100%, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +@keyframes fadeInTopLeft { + from { + opacity: 0; + -webkit-transform: translate3d(-100%, -100%, 0); + transform: translate3d(-100%, -100%, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +.animate__fadeInTopLeft { + -webkit-animation-name: fadeInTopLeft; + animation-name: fadeInTopLeft; +} +@-webkit-keyframes fadeInTopRight { + from { + opacity: 0; + -webkit-transform: translate3d(100%, -100%, 0); + transform: translate3d(100%, -100%, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +@keyframes fadeInTopRight { + from { + opacity: 0; + -webkit-transform: translate3d(100%, -100%, 0); + transform: translate3d(100%, -100%, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +.animate__fadeInTopRight { + -webkit-animation-name: fadeInTopRight; + animation-name: fadeInTopRight; +} +@-webkit-keyframes fadeInBottomLeft { + from { + opacity: 0; + -webkit-transform: translate3d(-100%, 100%, 0); + transform: translate3d(-100%, 100%, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +@keyframes fadeInBottomLeft { + from { + opacity: 0; + -webkit-transform: translate3d(-100%, 100%, 0); + transform: translate3d(-100%, 100%, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +.animate__fadeInBottomLeft { + -webkit-animation-name: fadeInBottomLeft; + animation-name: fadeInBottomLeft; +} +@-webkit-keyframes fadeInBottomRight { + from { + opacity: 0; + -webkit-transform: translate3d(100%, 100%, 0); + transform: translate3d(100%, 100%, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +@keyframes fadeInBottomRight { + from { + opacity: 0; + -webkit-transform: translate3d(100%, 100%, 0); + transform: translate3d(100%, 100%, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +.animate__fadeInBottomRight { + -webkit-animation-name: fadeInBottomRight; + animation-name: fadeInBottomRight; +} +/* Fading exits */ @-webkit-keyframes fadeOut { from { opacity: 1; @@ -1651,7 +2188,6 @@ opacity: 0; } } - @keyframes fadeOut { from { opacity: 1; @@ -1661,12 +2197,10 @@ opacity: 0; } } - -.fadeOut { +.animate__fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } - @-webkit-keyframes fadeOutDown { from { opacity: 1; @@ -1678,7 +2212,6 @@ transform: translate3d(0, 100%, 0); } } - @keyframes fadeOutDown { from { opacity: 1; @@ -1690,12 +2223,10 @@ transform: translate3d(0, 100%, 0); } } - -.fadeOutDown { +.animate__fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } - @-webkit-keyframes fadeOutDownBig { from { opacity: 1; @@ -1707,7 +2238,6 @@ transform: translate3d(0, 2000px, 0); } } - @keyframes fadeOutDownBig { from { opacity: 1; @@ -1719,12 +2249,10 @@ transform: translate3d(0, 2000px, 0); } } - -.fadeOutDownBig { +.animate__fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } - @-webkit-keyframes fadeOutLeft { from { opacity: 1; @@ -1736,7 +2264,6 @@ transform: translate3d(-100%, 0, 0); } } - @keyframes fadeOutLeft { from { opacity: 1; @@ -1748,12 +2275,10 @@ transform: translate3d(-100%, 0, 0); } } - -.fadeOutLeft { +.animate__fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } - @-webkit-keyframes fadeOutLeftBig { from { opacity: 1; @@ -1765,7 +2290,6 @@ transform: translate3d(-2000px, 0, 0); } } - @keyframes fadeOutLeftBig { from { opacity: 1; @@ -1777,12 +2301,10 @@ transform: translate3d(-2000px, 0, 0); } } - -.fadeOutLeftBig { +.animate__fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } - @-webkit-keyframes fadeOutRight { from { opacity: 1; @@ -1794,7 +2316,6 @@ transform: translate3d(100%, 0, 0); } } - @keyframes fadeOutRight { from { opacity: 1; @@ -1806,12 +2327,10 @@ transform: translate3d(100%, 0, 0); } } - -.fadeOutRight { +.animate__fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } - @-webkit-keyframes fadeOutRightBig { from { opacity: 1; @@ -1823,7 +2342,6 @@ transform: translate3d(2000px, 0, 0); } } - @keyframes fadeOutRightBig { from { opacity: 1; @@ -1835,12 +2353,10 @@ transform: translate3d(2000px, 0, 0); } } - -.fadeOutRightBig { +.animate__fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } - @-webkit-keyframes fadeOutUp { from { opacity: 1; @@ -1852,7 +2368,6 @@ transform: translate3d(0, -100%, 0); } } - @keyframes fadeOutUp { from { opacity: 1; @@ -1864,12 +2379,10 @@ transform: translate3d(0, -100%, 0); } } - -.fadeOutUp { +.animate__fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } - @-webkit-keyframes fadeOutUpBig { from { opacity: 1; @@ -1881,7 +2394,6 @@ transform: translate3d(0, -2000px, 0); } } - @keyframes fadeOutUpBig { from { opacity: 1; @@ -1893,16 +2405,126 @@ transform: translate3d(0, -2000px, 0); } } - -.fadeOutUpBig { +.animate__fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } - +@-webkit-keyframes fadeOutTopLeft { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(-100%, -100%, 0); + transform: translate3d(-100%, -100%, 0); + } +} +@keyframes fadeOutTopLeft { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(-100%, -100%, 0); + transform: translate3d(-100%, -100%, 0); + } +} +.animate__fadeOutTopLeft { + -webkit-animation-name: fadeOutTopLeft; + animation-name: fadeOutTopLeft; +} +@-webkit-keyframes fadeOutTopRight { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(100%, -100%, 0); + transform: translate3d(100%, -100%, 0); + } +} +@keyframes fadeOutTopRight { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(100%, -100%, 0); + transform: translate3d(100%, -100%, 0); + } +} +.animate__fadeOutTopRight { + -webkit-animation-name: fadeOutTopRight; + animation-name: fadeOutTopRight; +} +@-webkit-keyframes fadeOutBottomRight { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(100%, 100%, 0); + transform: translate3d(100%, 100%, 0); + } +} +@keyframes fadeOutBottomRight { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(100%, 100%, 0); + transform: translate3d(100%, 100%, 0); + } +} +.animate__fadeOutBottomRight { + -webkit-animation-name: fadeOutBottomRight; + animation-name: fadeOutBottomRight; +} +@-webkit-keyframes fadeOutBottomLeft { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(-100%, 100%, 0); + transform: translate3d(-100%, 100%, 0); + } +} +@keyframes fadeOutBottomLeft { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(-100%, 100%, 0); + transform: translate3d(-100%, 100%, 0); + } +} +.animate__fadeOutBottomLeft { + -webkit-animation-name: fadeOutBottomLeft; + animation-name: fadeOutBottomLeft; +} +/* Flippers */ @-webkit-keyframes flip { from { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) - rotate3d(0, 1, 0, -360deg); + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; @@ -1936,18 +2558,15 @@ } to { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) - rotate3d(0, 1, 0, 0deg); + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } - @keyframes flip { from { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) - rotate3d(0, 1, 0, -360deg); + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; @@ -1981,21 +2600,18 @@ } to { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) - rotate3d(0, 1, 0, 0deg); + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } - -.animated.flip { +.animate__animated.animate__flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } - @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); @@ -2028,7 +2644,6 @@ transform: perspective(400px); } } - @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); @@ -2061,14 +2676,12 @@ transform: perspective(400px); } } - -.flipInX { +.animate__flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } - @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); @@ -2101,7 +2714,6 @@ transform: perspective(400px); } } - @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); @@ -2134,14 +2746,12 @@ transform: perspective(400px); } } - -.flipInY { +.animate__flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } - @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); @@ -2160,7 +2770,6 @@ opacity: 0; } } - @keyframes flipOutX { from { -webkit-transform: perspective(400px); @@ -2179,16 +2788,16 @@ opacity: 0; } } - -.flipOutX { - -webkit-animation-duration: 0.75s; - animation-duration: 0.75s; +.animate__flipOutX { + -webkit-animation-duration: calc(1s * 0.75); + animation-duration: calc(1s * 0.75); + -webkit-animation-duration: calc(var(--animate-duration) * 0.75); + animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } - @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); @@ -2207,7 +2816,6 @@ opacity: 0; } } - @keyframes flipOutY { from { -webkit-transform: perspective(400px); @@ -2226,17 +2834,18 @@ opacity: 0; } } - -.flipOutY { - -webkit-animation-duration: 0.75s; - animation-duration: 0.75s; +.animate__flipOutY { + -webkit-animation-duration: calc(1s * 0.75); + animation-duration: calc(1s * 0.75); + -webkit-animation-duration: calc(var(--animate-duration) * 0.75); + animation-duration: calc(var(--animate-duration) * 0.75); -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } - -@-webkit-keyframes lightSpeedIn { +/* Lightspeed */ +@-webkit-keyframes lightSpeedInRight { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); @@ -2259,8 +2868,7 @@ transform: translate3d(0, 0, 0); } } - -@keyframes lightSpeedIn { +@keyframes lightSpeedInRight { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); @@ -2283,15 +2891,65 @@ transform: translate3d(0, 0, 0); } } - -.lightSpeedIn { - -webkit-animation-name: lightSpeedIn; - animation-name: lightSpeedIn; +.animate__lightSpeedInRight { + -webkit-animation-name: lightSpeedInRight; + animation-name: lightSpeedInRight; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } +@-webkit-keyframes lightSpeedInLeft { + from { + -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); + transform: translate3d(-100%, 0, 0) skewX(30deg); + opacity: 0; + } + + 60% { + -webkit-transform: skewX(-20deg); + transform: skewX(-20deg); + opacity: 1; + } -@-webkit-keyframes lightSpeedOut { + 80% { + -webkit-transform: skewX(5deg); + transform: skewX(5deg); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +@keyframes lightSpeedInLeft { + from { + -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); + transform: translate3d(-100%, 0, 0) skewX(30deg); + opacity: 0; + } + + 60% { + -webkit-transform: skewX(-20deg); + transform: skewX(-20deg); + opacity: 1; + } + + 80% { + -webkit-transform: skewX(5deg); + transform: skewX(5deg); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +.animate__lightSpeedInLeft { + -webkit-animation-name: lightSpeedInLeft; + animation-name: lightSpeedInLeft; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; +} +@-webkit-keyframes lightSpeedOutRight { from { opacity: 1; } @@ -2302,8 +2960,7 @@ opacity: 0; } } - -@keyframes lightSpeedOut { +@keyframes lightSpeedOutRight { from { opacity: 1; } @@ -2314,408 +2971,345 @@ opacity: 0; } } - -.lightSpeedOut { - -webkit-animation-name: lightSpeedOut; - animation-name: lightSpeedOut; +.animate__lightSpeedOutRight { + -webkit-animation-name: lightSpeedOutRight; + animation-name: lightSpeedOutRight; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } +@-webkit-keyframes lightSpeedOutLeft { + from { + opacity: 1; + } + to { + -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); + transform: translate3d(-100%, 0, 0) skewX(-30deg); + opacity: 0; + } +} +@keyframes lightSpeedOutLeft { + from { + opacity: 1; + } + + to { + -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); + transform: translate3d(-100%, 0, 0) skewX(-30deg); + opacity: 0; + } +} +.animate__lightSpeedOutLeft { + -webkit-animation-name: lightSpeedOutLeft; + animation-name: lightSpeedOutLeft; + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; +} +/* Rotating entrances */ @-webkit-keyframes rotateIn { from { - -webkit-transform-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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } - -.rotateIn { +.animate__rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; + -webkit-transform-origin: center; + transform-origin: center; } - @-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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } - -.rotateInDownLeft { +.animate__rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; + -webkit-transform-origin: left bottom; + transform-origin: left bottom; } - @-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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } - -.rotateInDownRight { +.animate__rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; + -webkit-transform-origin: right bottom; + transform-origin: right bottom; } - @-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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } - -.rotateInUpLeft { +.animate__rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; + -webkit-transform-origin: left bottom; + transform-origin: left bottom; } - @-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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } - -.rotateInUpRight { +.animate__rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; + -webkit-transform-origin: right bottom; + transform-origin: right bottom; } - +/* Rotating exits */ @-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 { +.animate__rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; + -webkit-transform-origin: center; + transform-origin: center; } - @-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 { +.animate__rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; + -webkit-transform-origin: left bottom; + transform-origin: left bottom; } - @-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 { +.animate__rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; + -webkit-transform-origin: right bottom; + transform-origin: right bottom; } - @-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 { +.animate__rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; + -webkit-transform-origin: left bottom; + transform-origin: left bottom; } - @-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 { +.animate__rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; + -webkit-transform-origin: right bottom; + transform-origin: right bottom; } - +/* Specials */ @-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; } @@ -2724,8 +3318,6 @@ 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; } @@ -2734,8 +3326,6 @@ 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; @@ -2747,11 +3337,8 @@ 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; } @@ -2760,8 +3347,6 @@ 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; } @@ -2770,8 +3355,6 @@ 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; @@ -2783,14 +3366,16 @@ opacity: 0; } } - -.hinge { - -webkit-animation-duration: 2s; - animation-duration: 2s; +.animate__hinge { + -webkit-animation-duration: calc(1s * 2); + animation-duration: calc(1s * 2); + -webkit-animation-duration: calc(var(--animate-duration) * 2); + animation-duration: calc(var(--animate-duration) * 2); -webkit-animation-name: hinge; animation-name: hinge; + -webkit-transform-origin: top left; + transform-origin: top left; } - @-webkit-keyframes jackInTheBox { from { opacity: 0; @@ -2816,7 +3401,6 @@ transform: scale(1); } } - @keyframes jackInTheBox { from { opacity: 0; @@ -2842,14 +3426,11 @@ transform: scale(1); } } - -.jackInTheBox { +.animate__jackInTheBox { -webkit-animation-name: jackInTheBox; animation-name: jackInTheBox; } - /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - @-webkit-keyframes rollIn { from { opacity: 0; @@ -2863,7 +3444,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes rollIn { from { opacity: 0; @@ -2877,14 +3457,11 @@ transform: translate3d(0, 0, 0); } } - -.rollIn { +.animate__rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } - /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - @-webkit-keyframes rollOut { from { opacity: 1; @@ -2896,7 +3473,6 @@ transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } - @keyframes rollOut { from { opacity: 1; @@ -2908,12 +3484,11 @@ transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } - -.rollOut { +.animate__rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } - +/* Zooming entrances */ @-webkit-keyframes zoomIn { from { opacity: 0; @@ -2925,7 +3500,6 @@ opacity: 1; } } - @keyframes zoomIn { from { opacity: 0; @@ -2937,12 +3511,10 @@ opacity: 1; } } - -.zoomIn { +.animate__zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } - @-webkit-keyframes zoomInDown { from { opacity: 0; @@ -2960,7 +3532,6 @@ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - @keyframes zoomInDown { from { opacity: 0; @@ -2978,12 +3549,10 @@ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - -.zoomInDown { +.animate__zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } - @-webkit-keyframes zoomInLeft { from { opacity: 0; @@ -3001,7 +3570,6 @@ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - @keyframes zoomInLeft { from { opacity: 0; @@ -3019,12 +3587,10 @@ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - -.zoomInLeft { +.animate__zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } - @-webkit-keyframes zoomInRight { from { opacity: 0; @@ -3042,7 +3608,6 @@ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - @keyframes zoomInRight { from { opacity: 0; @@ -3060,12 +3625,10 @@ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - -.zoomInRight { +.animate__zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } - @-webkit-keyframes zoomInUp { from { opacity: 0; @@ -3083,7 +3646,6 @@ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - @keyframes zoomInUp { from { opacity: 0; @@ -3101,12 +3663,11 @@ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - -.zoomInUp { +.animate__zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } - +/* Zooming exits */ @-webkit-keyframes zoomOut { from { opacity: 1; @@ -3122,7 +3683,6 @@ opacity: 0; } } - @keyframes zoomOut { from { opacity: 1; @@ -3138,12 +3698,10 @@ opacity: 0; } } - -.zoomOut { +.animate__zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } - @-webkit-keyframes zoomOutDown { 40% { opacity: 1; @@ -3157,13 +3715,10 @@ 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; @@ -3177,18 +3732,16 @@ 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 { +.animate__zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; + -webkit-transform-origin: center bottom; + transform-origin: center bottom; } - @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; @@ -3200,11 +3753,8 @@ 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; @@ -3216,16 +3766,14 @@ 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 { +.animate__zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; + -webkit-transform-origin: left center; + transform-origin: left center; } - @-webkit-keyframes zoomOutRight { 40% { opacity: 1; @@ -3237,11 +3785,8 @@ 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; @@ -3253,16 +3798,14 @@ 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 { +.animate__zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; + -webkit-transform-origin: right center; + transform-origin: right center; } - @-webkit-keyframes zoomOutUp { 40% { opacity: 1; @@ -3276,13 +3819,10 @@ 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; @@ -3296,18 +3836,17 @@ 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 { +.animate__zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; + -webkit-transform-origin: center bottom; + transform-origin: center bottom; } - +/* Sliding entrances */ @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); @@ -3320,7 +3859,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); @@ -3333,12 +3871,10 @@ transform: translate3d(0, 0, 0); } } - -.slideInDown { +.animate__slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } - @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); @@ -3351,7 +3887,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); @@ -3364,12 +3899,10 @@ transform: translate3d(0, 0, 0); } } - -.slideInLeft { +.animate__slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } - @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); @@ -3382,7 +3915,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); @@ -3395,12 +3927,10 @@ transform: translate3d(0, 0, 0); } } - -.slideInRight { +.animate__slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } - @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); @@ -3413,7 +3943,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); @@ -3426,12 +3955,11 @@ transform: translate3d(0, 0, 0); } } - -.slideInUp { +.animate__slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } - +/* Sliding exits */ @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); @@ -3444,7 +3972,6 @@ transform: translate3d(0, 100%, 0); } } - @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); @@ -3457,12 +3984,10 @@ transform: translate3d(0, 100%, 0); } } - -.slideOutDown { +.animate__slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } - @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); @@ -3475,7 +4000,6 @@ transform: translate3d(-100%, 0, 0); } } - @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); @@ -3488,12 +4012,10 @@ transform: translate3d(-100%, 0, 0); } } - -.slideOutLeft { +.animate__slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } - @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); @@ -3506,7 +4028,6 @@ transform: translate3d(100%, 0, 0); } } - @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); @@ -3519,12 +4040,10 @@ transform: translate3d(100%, 0, 0); } } - -.slideOutRight { +.animate__slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } - @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); @@ -3537,7 +4056,6 @@ transform: translate3d(0, -100%, 0); } } - @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); @@ -3550,76 +4068,7 @@ transform: translate3d(0, -100%, 0); } } - -.slideOutUp { +.animate__slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; -} - -.animated { - -webkit-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; -} - -.animated.infinite { - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; -} - -.animated.delay-1s { - -webkit-animation-delay: 1s; - animation-delay: 1s; -} - -.animated.delay-2s { - -webkit-animation-delay: 2s; - animation-delay: 2s; -} - -.animated.delay-3s { - -webkit-animation-delay: 3s; - animation-delay: 3s; -} - -.animated.delay-4s { - -webkit-animation-delay: 4s; - animation-delay: 4s; -} - -.animated.delay-5s { - -webkit-animation-delay: 5s; - animation-delay: 5s; -} - -.animated.fast { - -webkit-animation-duration: 800ms; - animation-duration: 800ms; -} - -.animated.faster { - -webkit-animation-duration: 500ms; - animation-duration: 500ms; -} - -.animated.slow { - -webkit-animation-duration: 2s; - animation-duration: 2s; -} - -.animated.slower { - -webkit-animation-duration: 3s; - animation-duration: 3s; -} - -@media (print), (prefers-reduced-motion: reduce) { - .animated { - -webkit-animation-duration: 1ms !important; - animation-duration: 1ms !important; - -webkit-transition-duration: 1ms !important; - transition-duration: 1ms !important; - -webkit-animation-iteration-count: 1 !important; - animation-iteration-count: 1 !important; - } }
\ No newline at end of file |