From ff9b47a4c5e9b3e19ffd8bd421c978f7169178e8 Mon Sep 17 00:00:00 2001 From: Niall Date: Tue, 12 Nov 2019 11:40:40 +0000 Subject: [PATCH] Prettier. --- animations/alokGoldy.css | 38 +++---- animations/blinking-neon.css | 15 +-- animations/blurFade.css | 33 +++--- animations/bubbles.css | 98 +++++++---------- animations/cLeft.css | 46 ++------ animations/comeOver.css | 25 +---- animations/darkBlack.css | 4 +- animations/escaping.css | 34 ++++-- animations/expand.css | 2 +- animations/fadeOutLeft.css | 38 +++---- animations/fallBounce.css | 32 +++--- animations/fancy-border.css | 18 ++-- animations/flashtext.css | 68 ++++++------ animations/flipInAndOut.css | 109 ++++++++----------- animations/halloweenColors.css | 28 +++-- animations/headShake.css | 106 +++++++++---------- animations/lightSpeedOut.css | 26 ++--- animations/lr-loop.css | 112 ++++++++++++++------ animations/pinheiro.css | 6 +- animations/rainbowBea.css | 42 ++++---- animations/reverseStretch.css | 1 - animations/rotateOutUpRight.css | 54 +++++----- animations/rrrah.css | 74 ++++++------- animations/scooby-doo.css | 46 ++++---- animations/shadow.css | 179 ++++++++++++++++++++------------ animations/shimmy.css | 38 ++----- animations/slasher.css | 158 ++++++++++++++++++++-------- animations/spotlight.css | 40 ++++--- animations/staircase_bounce.css | 96 ++++++++--------- animations/star-wars-roll.css | 14 +-- animations/the-shining.css | 48 +++++---- animations/zoomOut.css | 50 ++++----- 32 files changed, 890 insertions(+), 788 deletions(-) diff --git a/animations/alokGoldy.css b/animations/alokGoldy.css index 6577625a..1c7a9eb7 100644 --- a/animations/alokGoldy.css +++ b/animations/alokGoldy.css @@ -1,25 +1,25 @@ - +/** @format */ .alokGoldy { - position: relative; - font-family: sans-serif; - text-transform: uppercase; - font-size: 2em; - letter-spacing: 4px; - overflow: hidden; - background: linear-gradient(90deg, #000, #fff, #000); - background-repeat: no-repeat; - background-size: 80%; - animation: animate 3s linear infinite; - -webkit-background-clip: text; - -webkit-text-fill-color: rgba(255, 255, 255, 0); + position: relative; + font-family: sans-serif; + text-transform: uppercase; + font-size: 2em; + letter-spacing: 4px; + overflow: hidden; + background: linear-gradient(90deg, #000, #fff, #000); + background-repeat: no-repeat; + background-size: 80%; + animation: animate 3s linear infinite; + -webkit-background-clip: text; + -webkit-text-fill-color: rgba(255, 255, 255, 0); } @keyframes alokGoldy { - 0% { - background-position: -500%; - } - 100% { - background-position: 500%; - } + 0% { + background-position: -500%; + } + 100% { + background-position: 500%; + } } diff --git a/animations/blinking-neon.css b/animations/blinking-neon.css index e415edb3..f8dceb01 100644 --- a/animations/blinking-neon.css +++ b/animations/blinking-neon.css @@ -4,13 +4,14 @@ * @format */ -@import url("https://fonts.googleapis.com/css?family=Sacramento&display=swap"); +@import url('https://fonts.googleapis.com/css?family=Sacramento&display=swap'); .blinking-neon { font-size: calc(20px + 18vh); line-height: calc(20px + 20vh); - text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000; + text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, + 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000; color: #fff6a9; - font-family: "Sacramento", cursive; + font-family: 'Sacramento', cursive; text-align: center; animation: blinky 12s infinite; -webkit-animation: blinky 12s infinite; @@ -31,7 +32,8 @@ 54%, 56%, 100% { - text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000; + text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, + 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000; color: #fff6a9; } } @@ -51,7 +53,8 @@ 54%, 56%, 100% { - text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000; + text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, + 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000; color: #fff6a9; } -} \ No newline at end of file +} diff --git a/animations/blurFade.css b/animations/blurFade.css index 00af1adf..3439d738 100644 --- a/animations/blurFade.css +++ b/animations/blurFade.css @@ -5,23 +5,24 @@ */ @keyframes blurFadeInOut { - 0% { - opacity: 0; - text-shadow: 0px 0px 40px #fff; - transform: scale(1.3); - } - 20%, 80% { - opacity: 1; - text-shadow: 0px 0px 1px #fff; - transform: scale(1); - } - 100% { - opacity: 0; - text-shadow: 0px 0px 50px #fff; - transform: scale(0); - } + 0% { + opacity: 0; + text-shadow: 0px 0px 40px #fff; + transform: scale(1.3); + } + 20%, + 80% { + opacity: 1; + text-shadow: 0px 0px 1px #fff; + transform: scale(1); + } + 100% { + opacity: 0; + text-shadow: 0px 0px 50px #fff; + transform: scale(0); + } } .blurFade { - animation: blurFadeInOut 3s infinite backwards; + animation: blurFadeInOut 3s infinite backwards; } diff --git a/animations/bubbles.css b/animations/bubbles.css index 7049a117..3fa2c58f 100644 --- a/animations/bubbles.css +++ b/animations/bubbles.css @@ -11,7 +11,7 @@ h1 { font-size: 8.5vw; color: white; padding: 5rem 0; - text-shadow: 0px 4px 48px rgba(255,255,255,0.2); + text-shadow: 0px 4px 48px rgba(255, 255, 255, 0.2); } .container { @@ -20,7 +20,8 @@ h1 { align-content: center; justify-content: center; background: { - image: linear-gradient(to bottom, #00c9ff 0%, #92fe9d 100%), url(https://images.unsplash.com/photo-1502726299822-6f583f972e02); + image: linear-gradient(to bottom, #00c9ff 0%, #92fe9d 100%), + url(https://images.unsplash.com/photo-1502726299822-6f583f972e02); blend-mode: multiply; size: cover; } @@ -28,12 +29,12 @@ h1 { } .bubbles-container { - position: absolute; - top: 0; - left: 50%; - width: 100%; - max-width: 15rem; - transform: translateX(-50%); + position: absolute; + top: 0; + left: 50%; + width: 100%; + max-width: 15rem; + transform: translateX(-50%); opacity: 0.75; overflow: visible; } @@ -41,20 +42,19 @@ h1 { .bubbles { width: 100%; height: auto; - + circle { stroke: white; fill: none; } - + > g > g:nth-of-type(3n) circle { stroke: #87f5fb; } - + > g > g:nth-of-type(4n) circle { stroke: #8be8cb; } - } .bubbles-large { @@ -68,7 +68,7 @@ h1 { g:nth-of-type(1) { animation: up 6.5s infinite; - + g { transform: translateX(350px); } @@ -76,12 +76,11 @@ h1 { circle { animation: wobble 3s infinite ease-in-out; } - } - + g:nth-of-type(2) { animation: up 5.25s 250ms infinite; - + g { transform: translateX(450px); } @@ -89,12 +88,11 @@ h1 { circle { animation: wobble 3s infinite ease-in-out; } - } - + g:nth-of-type(3) { animation: up 6s 750ms infinite; - + g { transform: translateX(700px); } @@ -102,12 +100,11 @@ h1 { circle { animation: wobble 3s infinite ease-in-out; } - } - + g:nth-of-type(4) { animation: up 5.5s 1.5s infinite; - + g { transform: translateX(500px); } @@ -115,12 +112,11 @@ h1 { circle { animation: wobble 3s infinite ease-in-out; } - } - + g:nth-of-type(5) { animation: up 6.5s 4s infinite; - + g { transform: translateX(675px); } @@ -128,9 +124,7 @@ h1 { circle { animation: wobble 3s infinite ease-in-out; } - } - } .bubbles-small { @@ -148,7 +142,7 @@ h1 { g:nth-of-type(1) { animation: up 5.25s infinite; - + g { transform: translateX(350px); } @@ -156,12 +150,11 @@ h1 { circle { animation: wobble 3s infinite ease-in-out; } - } g:nth-of-type(2) { animation: up 5.75s infinite; - + g { transform: translateX(750px); } @@ -169,12 +162,11 @@ h1 { circle { animation: wobble 3s infinite ease-in-out; } - } g:nth-of-type(3) { animation: up 5.25s 250ms infinite; - + g { transform: translateX(350px); } @@ -182,12 +174,11 @@ h1 { circle { animation: wobble 3s 250ms infinite ease-in-out; } - } g:nth-of-type(4) { animation: up 5.75s 325ms infinite; - + g { transform: translateX(180px); } @@ -195,12 +186,11 @@ h1 { circle { animation: wobble 3s 325ms infinite ease-in-out; } - } g:nth-of-type(5) { animation: up 6s 125ms infinite; - + g { transform: translateX(350px); } @@ -208,12 +198,11 @@ h1 { circle { animation: wobble 3s 250ms infinite ease-in-out; } - } g:nth-of-type(6) { animation: up 5.13s 250ms infinite; - + g { transform: translateX(650px); } @@ -221,12 +210,11 @@ h1 { circle { animation: wobble 3s 125ms infinite ease-in-out; } - } g:nth-of-type(7) { animation: up 6.25s 350ms infinite; - + g { transform: translateX(480px); } @@ -234,12 +222,11 @@ h1 { circle { animation: wobble 3s 325ms infinite ease-in-out; } - } - + g:nth-of-type(8) { animation: up 7s 200ms infinite; - + g { transform: translateX(330px); } @@ -247,12 +234,11 @@ h1 { circle { animation: wobble 3s 325ms infinite ease-in-out; } - } g:nth-of-type(9) { animation: up 6.25s 233ms infinite; - + g { transform: translateX(230px); } @@ -260,12 +246,11 @@ h1 { circle { animation: wobble 3s 275ms infinite ease-in-out; } - } - + g:nth-of-type(10) { animation: up 6s 900ms infinite; - + g { transform: translateX(730px); } @@ -273,36 +258,31 @@ h1 { circle { animation: wobble 2s 905ms infinite ease-in-out; } - } - } @keyframes wobble { - 33% { transform: translateX(-50px); } - + 66% { transform: translateX(50px); } - } @keyframes up { - 0% { opacity: 0; } - - 10%, 90% { + + 10%, + 90% { opacity: 1; } - + 100% { opacity: 0; transform: translateY(-1024px); } - -} \ No newline at end of file +} diff --git a/animations/cLeft.css b/animations/cLeft.css index da0cc638..b04fcbfb 100644 --- a/animations/cLeft.css +++ b/animations/cLeft.css @@ -8,84 +8,50 @@ */ - - @keyframes cLeft { - 5%, - 60%, - 75%, - 90%, - to { - animation-timing-function: cubic-bezier(0.215, 0.6, 0.355, 1); - } - - 5% { - opacity: 1; transform: translate3d(3000px, 0, 0); - } - - 60% { - opacity: 1; transform: translate3d(25px, 0, 0); - } - - 75% { - transform: translate3d(50px, 0, 0); - } - - 90% { - transform: translate3d(20px, 1, 1); - } - - to { - transform: none; - } - } - - .cLeft { - animation-name: cLeft; - + text-align: center; - - color: #00FF00; - + + color: #00ff00; + font-size: 30px; - + font-family: Arial; - - animation-duration: 1s; + animation-duration: 1s; } diff --git a/animations/comeOver.css b/animations/comeOver.css index 3f25a2a0..595461c2 100644 --- a/animations/comeOver.css +++ b/animations/comeOver.css @@ -8,34 +8,21 @@ */ - - @keyframes animate { - 0% { - background-position: -500%; - } - - 100% { - background-position: 500%; - } - } - - -.comeOver{ - +.comeOver { position: relative; font-family: cursive, Arial; - + font-size: 45px; letter-spacing: 1px; @@ -45,7 +32,7 @@ background-repeat: no-repeat; background-size: 75%; - + text-decoration: underline; animation: animate 2s linear infinite; @@ -55,14 +42,8 @@ -webkit-text-fill-color: rgb(0, 255, 0); transition: all 0.8s; - } - - .comeOver:hover { - letter-spacing: 20px; - - } diff --git a/animations/darkBlack.css b/animations/darkBlack.css index 9137dbee..6e846a44 100644 --- a/animations/darkBlack.css +++ b/animations/darkBlack.css @@ -26,8 +26,8 @@ animation: darkBlack 2s ease infinite; background: linear-gradient( 110deg, - rgb(123,34,56) 28%, - rgba(0, 0, 0, 0.50) 30% + rgb(123, 34, 56) 28%, + rgba(0, 0, 0, 0.5) 30% ), linear-gradient(110deg, rgb(255, 69, 0) 34%, #000 40%); background-size: 400%; diff --git a/animations/escaping.css b/animations/escaping.css index 1244841c..d31b6642 100644 --- a/animations/escaping.css +++ b/animations/escaping.css @@ -5,19 +5,35 @@ */ @-webkit-keyframes escaping { - 0% {opacity:0;} - 20% {opacity:1;} - 80% {opacity:1;} - 100% {opacity:0;} + 0% { + opacity: 0; + } + 20% { + opacity: 1; + } + 80% { + opacity: 1; + } + 100% { + opacity: 0; + } } @keyframes escaping { - 0% {opacity:1;} - 20% {opacity:1;} - 80% {opacity:0;} - 100% {opacity:0;} + 0% { + opacity: 1; + } + 20% { + opacity: 1; + } + 80% { + opacity: 0; + } + 100% { + opacity: 0; + } } .escaping { - animation: escaping 2s infinite; + animation: escaping 2s infinite; } diff --git a/animations/expand.css b/animations/expand.css index 4f5ff916..3535a7e5 100644 --- a/animations/expand.css +++ b/animations/expand.css @@ -14,7 +14,7 @@ } } -.expand{ +.expand { position: relative; font-family: Helvetica, Arial; letter-spacing: 1px; diff --git a/animations/fadeOutLeft.css b/animations/fadeOutLeft.css index 96c42ed0..de919f76 100644 --- a/animations/fadeOutLeft.css +++ b/animations/fadeOutLeft.css @@ -5,31 +5,31 @@ */ @-webkit-keyframes fadeOutLeft { - from { - opacity: 1; - } + from { + opacity: 1; + } - to { - opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - } + to { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } } @keyframes fadeOutLeft { - from { - opacity: 1; - } + from { + opacity: 1; + } - to { - opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - } + to { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } } .fadeOutLeft { - -webkit-animation-name: fadeOutLeft; - animation-name: fadeOutLeft; - animation-duration: 1s; + -webkit-animation-name: fadeOutLeft; + animation-name: fadeOutLeft; + animation-duration: 1s; } diff --git a/animations/fallBounce.css b/animations/fallBounce.css index 59f3ba62..2c5a20dd 100644 --- a/animations/fallBounce.css +++ b/animations/fallBounce.css @@ -5,22 +5,22 @@ */ @keyframes fallBounce { - from { - transform: translateY(-200px); - } - 40% { - transform: translateY(0); - } - 60% { - transform: translateY(-15px); - } - to { - transform: translateY(0); - } + from { + transform: translateY(-200px); + } + 40% { + transform: translateY(0); + } + 60% { + transform: translateY(-15px); + } + to { + transform: translateY(0); + } } .fallBounce { - animation-duration: 2s; - animation-name: fallBounce; - animation-iteration-count: infinite; -} \ No newline at end of file + animation-duration: 2s; + animation-name: fallBounce; + animation-iteration-count: infinite; +} diff --git a/animations/fancy-border.css b/animations/fancy-border.css index f862e62b..d8741019 100644 --- a/animations/fancy-border.css +++ b/animations/fancy-border.css @@ -1,10 +1,12 @@ /** - * By: ThePoptartCrpr + * By: ThePoptartCrpr + * + * @format */ .fancy-border { animation: fancy-border 7s infinite; - + border-top: 5px solid transparent; border-bottom: 5px solid transparent; } @@ -13,31 +15,31 @@ 0% { opacity: 0; } - + 10% { transform: scale(1.15); opacity: 1; } - + 15% { border-top: 5px solid transparent; } - + 20% { border-top: 5px solid red; border-bottom: 5px solid transparent; transform: scale(1.1); } - + 25% { border-bottom: 5px solid red; } - + 65% { opacity: 1; border-color: red; } - + 100% { opacity: 0; border-color: transparent; diff --git a/animations/flashtext.css b/animations/flashtext.css index 8bf78928..f754fcaa 100644 --- a/animations/flashtext.css +++ b/animations/flashtext.css @@ -1,44 +1,48 @@ -/* -* BY: Tahirih, -* Front developer from Perú -* GitHub: cTahirih +/** + * /* + * BY: Tahirih, + * Front developer from Perú + * GitHub: cTahirih + * + * @format */ + .flashtext { - animation: flashtext 3s ease infinite; - transform-origin: 50% 50%; + animation: flashtext 3s ease infinite; + transform-origin: 50% 50%; } @keyframes flashtext { - 0% { - opacity:1; - color: #fff; - } - 16.66667% { - opacity:0; - color: #ff9f57; - } - 33.33333% { - opacity:1; - color: #fff; - } - 50% { - opacity:0; - color: #ff9f57; - } - 66.66667% { - opacity:1; - color: #fff; - } - 100% { - opacity:1; - color: #ff9f57; - } + 0% { + opacity: 1; + color: #fff; + } + 16.66667% { + opacity: 0; + color: #ff9f57; + } + 33.33333% { + opacity: 1; + color: #fff; + } + 50% { + opacity: 0; + color: #ff9f57; + } + 66.66667% { + opacity: 1; + color: #fff; + } + 100% { + opacity: 1; + color: #ff9f57; + } } .flashtext::before { - content: ' 🎃 '; + content: ' 🎃 '; } .flashtext::after { - content: ' 👻 '; + content: ' 👻 '; } diff --git a/animations/flipInAndOut.css b/animations/flipInAndOut.css index a13c0e5a..92a68f08 100644 --- a/animations/flipInAndOut.css +++ b/animations/flipInAndOut.css @@ -8,97 +8,72 @@ */ +@-webkit-keyframes flipInAndOut { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + -webkit-transform-origin: bottom left; + transform-origin: bottom left; + } - @-webkit-keyframes flipInAndOut { + 50% { + -webkit-transform: rotate(180deg); - 0% { + transform: rotate(180deg); - -webkit-transform: rotate(0); + -webkit-transform-origin: bottom left; - transform: rotate(0); - - -webkit-transform-origin: bottom left; - - transform-origin: bottom left; - - } - - 50% { - - -webkit-transform: rotate(180deg); - - transform: rotate(180deg); - - -webkit-transform-origin: bottom left; - - transform-origin: bottom left; - - } + transform-origin: bottom left; + } 100% { + -webkit-transform: rotate(0deg); - -webkit-transform: rotate(0deg); - - transform: rotate(0deg); - - -webkit-transform-origin: bottom left; - - transform-origin: bottom left; - - } - - } + transform: rotate(0deg); - @keyframes flipInAndOut { + -webkit-transform-origin: bottom left; - 0% { - - -webkit-transform: rotate(0); - - transform: rotate(0); - - -webkit-transform-origin: bottom left; + transform-origin: bottom left; + } +} - transform-origin: bottom left; +@keyframes flipInAndOut { + 0% { + -webkit-transform: rotate(0); - } + transform: rotate(0); - 50% { + -webkit-transform-origin: bottom left; - -webkit-transform: rotate(180deg); + transform-origin: bottom left; + } - transform: rotate(180deg); + 50% { + -webkit-transform: rotate(180deg); - -webkit-transform-origin: bottom left; + transform: rotate(180deg); - transform-origin: bottom left; + -webkit-transform-origin: bottom left; - } + transform-origin: bottom left; + } 100% { + -webkit-transform: rotate(0deg); - -webkit-transform: rotate(0deg); - - transform: rotate(0deg); - - -webkit-transform-origin: bottom left; - - transform-origin: bottom left; - - } - - } - - + transform: rotate(0deg); + -webkit-transform-origin: bottom left; + transform-origin: bottom left; + } +} .flipInAndOut { + -webkit-animation: flipInAndOut 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) + both; - -webkit-animation: flipInAndOut 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; - - animation: flipInAndOut 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; - color:aqua; - + animation: flipInAndOut 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) both; + color: aqua; } diff --git a/animations/halloweenColors.css b/animations/halloweenColors.css index b686d34d..ec29b800 100644 --- a/animations/halloweenColors.css +++ b/animations/halloweenColors.css @@ -1,11 +1,28 @@ +/** @format */ + @import url('https://fonts.googleapis.com/css?family=Staatliches&display=swap'); @keyframes halloweenColors { - 0% {background: black; color: #e55e22;} - 25% {background: #a73ae7; color: black; } - 50% {background: #e55e22; color: white;} - 75% {background: #c5f835; color: black; } - 100% {background: #614973; color: #e55e22; } + 0% { + background: black; + color: #e55e22; + } + 25% { + background: #a73ae7; + color: black; + } + 50% { + background: #e55e22; + color: white; + } + 75% { + background: #c5f835; + color: black; + } + 100% { + background: #614973; + color: #e55e22; + } } .halloweenColors { @@ -17,5 +34,4 @@ padding: 30px; position: relative; animation-direction: alternate; - } diff --git a/animations/headShake.css b/animations/headShake.css index 7a4d7754..80d417d6 100644 --- a/animations/headShake.css +++ b/animations/headShake.css @@ -1,70 +1,72 @@ +/** @format */ + @-webkit-keyframes headShake { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); - } + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } - 6.5% { - -webkit-transform: translateX(-6px) rotateY(-9deg); - transform: translateX(-6px) rotateY(-9deg); - } + 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); - } + 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); - } + 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); - } + 43.5% { + -webkit-transform: translateX(2px) rotateY(3deg); + transform: translateX(2px) rotateY(3deg); + } - 50% { - -webkit-transform: translateX(0); - transform: translateX(0); - } + 50% { + -webkit-transform: translateX(0); + transform: translateX(0); + } } @keyframes headShake { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); - } + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } - 6.5% { - -webkit-transform: translateX(-6px) rotateY(-9deg); - transform: translateX(-6px) rotateY(-9deg); - } + 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); - } + 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); - } + 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); - } + 43.5% { + -webkit-transform: translateX(2px) rotateY(3deg); + transform: translateX(2px) rotateY(3deg); + } - 50% { - -webkit-transform: translateX(0); - transform: translateX(0); - } + 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-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-name: headShake; + animation-name: headShake; } diff --git a/animations/lightSpeedOut.css b/animations/lightSpeedOut.css index 853df594..f9acb8c9 100644 --- a/animations/lightSpeedOut.css +++ b/animations/lightSpeedOut.css @@ -1,18 +1,20 @@ +/** @format */ + @keyframes lightSpeedOut { - from { - opacity: 1; - } + from { + opacity: 1; + } - to { - -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); - transform: translate3d(100%, 0, 0) skewX(30deg); - opacity: 0; - } + 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-animation-name: lightSpeedOut; + animation-name: lightSpeedOut; + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; } diff --git a/animations/lr-loop.css b/animations/lr-loop.css index 3ba87de3..2d60ef05 100644 --- a/animations/lr-loop.css +++ b/animations/lr-loop.css @@ -7,39 +7,93 @@ @import url('https://fonts.googleapis.com/css?family=Audiowide&display=swap'); .lr-loop { - color: #23204c; - animation-name: lr-loop; - animation-duration: 3s; - animation-iteration-count: infinite; - position: relative; - text-align: center; - text-shadow: #e13d7d 0px 0px 30px; - font-family: 'Audiowide', cursive; - -webkit-animation-name: lr-loop; - -webkit-animation-duration: 5s; - -webkit-animation-iteration-count: infinite; - + color: #23204c; + animation-name: lr-loop; + animation-duration: 3s; + animation-iteration-count: infinite; + position: relative; + text-align: center; + text-shadow: #e13d7d 0px 0px 30px; + font-family: 'Audiowide', cursive; + -webkit-animation-name: lr-loop; + -webkit-animation-duration: 5s; + -webkit-animation-iteration-count: infinite; } @keyframes lr-loop { - 0% {color: #941baf; left:0px; text-shadow: #941baf 0px 0px 30px; transform: scale(1.2)} - 20% {color: #a921c8; left:100px; text-shadow: #a921c8 0px 0px 30px; transform: scale(1.0)} - 40% {color: #9721c8; left:0px; text-shadow: #9721c8 0px 0px 30px; transform: scale(1.0)} - 60% {color: #da0cb5; left:-100px; text-shadow: #da0cb5 0px 0px 30px; transform: scale(1.0)} - 80% {color: #e13d7d; left:0; text-shadow: #e13d7d 0px 0px 30px; transform: scale(1.0)} - 100% {color: #941baf; left:0; text-shadow: #941baf 0px 0px 30px; transform: scale(1.2); - } + 0% { + color: #941baf; + left: 0px; + text-shadow: #941baf 0px 0px 30px; + transform: scale(1.2); + } + 20% { + color: #a921c8; + left: 100px; + text-shadow: #a921c8 0px 0px 30px; + transform: scale(1); + } + 40% { + color: #9721c8; + left: 0px; + text-shadow: #9721c8 0px 0px 30px; + transform: scale(1); + } + 60% { + color: #da0cb5; + left: -100px; + text-shadow: #da0cb5 0px 0px 30px; + transform: scale(1); + } + 80% { + color: #e13d7d; + left: 0; + text-shadow: #e13d7d 0px 0px 30px; + transform: scale(1); + } + 100% { + color: #941baf; + left: 0; + text-shadow: #941baf 0px 0px 30px; + transform: scale(1.2); + } } @-webkit-keyframes lr-loop { - 0% {color: #941baf; left:0px; text-shadow: #941baf 0px 0px 30px; transform: scale(1.2)} - 20% {color: #a921c8; left:100px; text-shadow: #a921c8 0px 0px 30px; transform: scale(1.0)} - 40% {color: #9721c8; left:0px; text-shadow: #9721c8 0px 0px 30px; transform: scale(1.0)} - 60% {color: #da0cb5; left:-100px; text-shadow: #da0cb5 0px 0px 30px; transform: scale(1.0)} - 80% {color: #e13d7d; left:0; text-shadow: #e13d7d 0px 0px 30px; transform: scale(1.0)} - 100% {color: #941baf; left:0; text-shadow: #941baf 0px 0px 30px; transform: scale(1.2); - } + 0% { + color: #941baf; + left: 0px; + text-shadow: #941baf 0px 0px 30px; + transform: scale(1.2); + } + 20% { + color: #a921c8; + left: 100px; + text-shadow: #a921c8 0px 0px 30px; + transform: scale(1); + } + 40% { + color: #9721c8; + left: 0px; + text-shadow: #9721c8 0px 0px 30px; + transform: scale(1); + } + 60% { + color: #da0cb5; + left: -100px; + text-shadow: #da0cb5 0px 0px 30px; + transform: scale(1); + } + 80% { + color: #e13d7d; + left: 0; + text-shadow: #e13d7d 0px 0px 30px; + transform: scale(1); + } + 100% { + color: #941baf; + left: 0; + text-shadow: #941baf 0px 0px 30px; + transform: scale(1.2); + } } - - - diff --git a/animations/pinheiro.css b/animations/pinheiro.css index 5583ba3a..8753e461 100644 --- a/animations/pinheiro.css +++ b/animations/pinheiro.css @@ -3,7 +3,7 @@ * * @format */ - + @import url('https://fonts.googleapis.com/css?family=Modak&display=swap'); @-webkit-keyframes pinheiro { @@ -40,7 +40,7 @@ /* City Name */ .pinheiro::before { - content: "PINHEIRO-MA"; + content: 'PINHEIRO-MA'; position: absolute; margin-top: -20px; margin-left: 250px; @@ -52,4 +52,4 @@ /* Flag from my city */ /* .pinheiro::after { content: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Bandeira_de_Pinheiro_-_MA.svg/750px-Bandeira_de_Pinheiro_-_MA.svg.png"); -} */ \ No newline at end of file +} */ diff --git a/animations/rainbowBea.css b/animations/rainbowBea.css index c05e31bd..26199a76 100644 --- a/animations/rainbowBea.css +++ b/animations/rainbowBea.css @@ -5,25 +5,25 @@ */ .rainbowBea { - display: flex; - align-content: center; - position: relative; - margin: 0 auto; - animation-name: rainbowBea; - animation-duration: 2s; - animation-iteration-count: infinite; - } + display: flex; + align-content: center; + position: relative; + margin: 0 auto; + animation-name: rainbowBea; + animation-duration: 2s; + animation-iteration-count: infinite; +} - @keyframes rainbowBea { - 0% { - top: 0px; - color:rgba(250, 246, 16); - } - 50%{ - color:rgba(16, 250, 121, 0.76); - } - 100% { - top: 249px; - color:rgba(250, 16, 67, 0.37); - } - } \ No newline at end of file +@keyframes rainbowBea { + 0% { + top: 0px; + color: rgba(250, 246, 16); + } + 50% { + color: rgba(16, 250, 121, 0.76); + } + 100% { + top: 249px; + color: rgba(250, 16, 67, 0.37); + } +} diff --git a/animations/reverseStretch.css b/animations/reverseStretch.css index e4a77ac3..38d05587 100644 --- a/animations/reverseStretch.css +++ b/animations/reverseStretch.css @@ -4,7 +4,6 @@ * @format */ - @keyframes reverseStretch { 0% { letter-spacing: 5px; diff --git a/animations/rotateOutUpRight.css b/animations/rotateOutUpRight.css index 2be3c7e7..1decab23 100644 --- a/animations/rotateOutUpRight.css +++ b/animations/rotateOutUpRight.css @@ -1,36 +1,38 @@ +/** @format */ + @-webkit-keyframes rotateOutUpRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - opacity: 1; - } + 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; - } + 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; - } + 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; - } + 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-animation-name: rotateOutUpRight; + animation-name: rotateOutUpRight; } diff --git a/animations/rrrah.css b/animations/rrrah.css index 64dee2a7..bf7d456c 100644 --- a/animations/rrrah.css +++ b/animations/rrrah.css @@ -1,40 +1,42 @@ +/** @format */ + @keyframes rrrah { - 0% { - transform: scaleX(0) scaleY(0); - } - 10%{ - transform: rotateZ(45deg) scaleX(0.1) scaleY(0.1); - } - 20%{ - transform: rotateZ(-45deg) scaleX(0.2) scaleY(0.2); - } - 30%{ - transform: rotateZ(45deg) scaleX(0.3) scaleY(0.3);; - } - 40%{ - transform: rotateZ(-45deg) scaleX(0.4) scaleY(0.4);; - } - 50%{ - transform: rotateZ(45deg) scaleX(0.5) scaleY(0.5); - } - 60%{ - transform: rotateZ(-45deg) scaleX(0.6) scaleY(0.6); - } - 70%{ - transform: rotateZ(45deg) scaleX(0.7) scaleY(0.7); - } - 80%{ - transform: rotateZ(-45deg) scale(2) - } - 90%{ - transform: rotateZ(45deg) scale(3) - } - 100% { - transform: scaleX(1) scaleY(1); - } + 0% { + transform: scaleX(0) scaleY(0); + } + 10% { + transform: rotateZ(45deg) scaleX(0.1) scaleY(0.1); + } + 20% { + transform: rotateZ(-45deg) scaleX(0.2) scaleY(0.2); + } + 30% { + transform: rotateZ(45deg) scaleX(0.3) scaleY(0.3); + } + 40% { + transform: rotateZ(-45deg) scaleX(0.4) scaleY(0.4); + } + 50% { + transform: rotateZ(45deg) scaleX(0.5) scaleY(0.5); + } + 60% { + transform: rotateZ(-45deg) scaleX(0.6) scaleY(0.6); + } + 70% { + transform: rotateZ(45deg) scaleX(0.7) scaleY(0.7); + } + 80% { + transform: rotateZ(-45deg) scale(2); + } + 90% { + transform: rotateZ(45deg) scale(3); + } + 100% { + transform: scaleX(1) scaleY(1); + } } .rrrah { - animation: rrrah .5s ease-out; - user-select: none; -} \ No newline at end of file + animation: rrrah 0.5s ease-out; + user-select: none; +} diff --git a/animations/scooby-doo.css b/animations/scooby-doo.css index 703375f8..ec22bd78 100644 --- a/animations/scooby-doo.css +++ b/animations/scooby-doo.css @@ -5,26 +5,30 @@ */ .scooby-doo { - color: #fff; - cursor: default; - font-family: 'Fredoka One', sans-serif; - font-size: 20vmin; - font-weight: normal; - margin: auto; - padding: 0 2rem; - outline: none; - transform: skew(10deg, 2deg); - animation: sd 2s ease-in-out infinite; + color: #fff; + cursor: default; + font-family: 'Fredoka One', sans-serif; + font-size: 20vmin; + font-weight: normal; + margin: auto; + padding: 0 2rem; + outline: none; + transform: skew(10deg, 2deg); + animation: sd 2s ease-in-out infinite; } @keyframes sd { - 30% { - text-shadow: 6px 0 2px rgba(179, 8, 8, 0.4), 12px 0 2px rgba(26, 35, 126, 0.3); - } - 50% { - letter-spacing: 0.25rem; - transform: skew(-10deg, -2deg); - } - 90%, 100%, 0% { - text-shadow: 2px 4px 2px rgba(179, 8, 8, 0.4), 4px 8px 2px rgba(26, 35, 126, 0.3); - } -} \ No newline at end of file + 30% { + text-shadow: 6px 0 2px rgba(179, 8, 8, 0.4), + 12px 0 2px rgba(26, 35, 126, 0.3); + } + 50% { + letter-spacing: 0.25rem; + transform: skew(-10deg, -2deg); + } + 90%, + 100%, + 0% { + text-shadow: 2px 4px 2px rgba(179, 8, 8, 0.4), + 4px 8px 2px rgba(26, 35, 126, 0.3); + } +} diff --git a/animations/shadow.css b/animations/shadow.css index c61f931b..bf115491 100644 --- a/animations/shadow.css +++ b/animations/shadow.css @@ -4,88 +4,135 @@ * @format */ - - @keyframes shadow { -0% { - font-size: 6px; - color: transparent; - text-shadow: -4px 4px rgba(179,179,179,.4), -3px 3px rgba(153,153,153,.2), -2px 2px rgba(179,179,179,.2), -1px 1px rgba(179,179,179,.2), 0px 0px rgba(128,128,128,.5), 1px -1px rgba(77,77,77,.6), 2px -2px rgba(77,77,77,.7), 3px -3px rgba(82,82,82,.8), 4px -4px rgba(77,77,77,.9), 5px -5px rgba(77,77,77,1); -} -10% { - font-size: 12px; - color: transparent; - text-shadow: -4px 4px rgba(179,179,179,.4), -3px 3px rgba(153,153,153,.2), -2px 2px rgba(179,179,179,.2), -1px 1px rgba(179,179,179,.2), 0px 0px rgba(128,128,128,.5), 1px -1px rgba(77,77,77,.6), 2px -2px rgba(77,77,77,.7), 3px -3px rgba(82,82,82,.8), 4px -4px rgba(77,77,77,.9), 5px -5px rgba(77,77,77,1); -} +@keyframes shadow { + 0% { + font-size: 6px; + color: transparent; + text-shadow: -4px 4px rgba(179, 179, 179, 0.4), + -3px 3px rgba(153, 153, 153, 0.2), -2px 2px rgba(179, 179, 179, 0.2), + -1px 1px rgba(179, 179, 179, 0.2), 0px 0px rgba(128, 128, 128, 0.5), + 1px -1px rgba(77, 77, 77, 0.6), 2px -2px rgba(77, 77, 77, 0.7), + 3px -3px rgba(82, 82, 82, 0.8), 4px -4px rgba(77, 77, 77, 0.9), + 5px -5px rgba(77, 77, 77, 1); + } + 10% { + font-size: 12px; + color: transparent; + text-shadow: -4px 4px rgba(179, 179, 179, 0.4), + -3px 3px rgba(153, 153, 153, 0.2), -2px 2px rgba(179, 179, 179, 0.2), + -1px 1px rgba(179, 179, 179, 0.2), 0px 0px rgba(128, 128, 128, 0.5), + 1px -1px rgba(77, 77, 77, 0.6), 2px -2px rgba(77, 77, 77, 0.7), + 3px -3px rgba(82, 82, 82, 0.8), 4px -4px rgba(77, 77, 77, 0.9), + 5px -5px rgba(77, 77, 77, 1); + } -20% { - font-size: 24px; - color: transparent; - text-shadow: -4px 4px rgba(179,179,179,.4), -3px 3px rgba(153,153,153,.2), -2px 2px rgba(179,179,179,.2), -1px 1px rgba(179,179,179,.2), 0px 0px rgba(128,128,128,.5), 1px -1px rgba(77,77,77,.6), 2px -2px rgba(77,77,77,.7), 3px -3px rgba(82,82,82,.8), 4px -4px rgba(77,77,77,.9), 5px -5px rgba(77,77,77,1); -} + 20% { + font-size: 24px; + color: transparent; + text-shadow: -4px 4px rgba(179, 179, 179, 0.4), + -3px 3px rgba(153, 153, 153, 0.2), -2px 2px rgba(179, 179, 179, 0.2), + -1px 1px rgba(179, 179, 179, 0.2), 0px 0px rgba(128, 128, 128, 0.5), + 1px -1px rgba(77, 77, 77, 0.6), 2px -2px rgba(77, 77, 77, 0.7), + 3px -3px rgba(82, 82, 82, 0.8), 4px -4px rgba(77, 77, 77, 0.9), + 5px -5px rgba(77, 77, 77, 1); + } -30% { - font-size: 36px; - color: transparent; + 30% { + font-size: 36px; + color: transparent; - text-shadow: -4px 4px rgba(179,179,179,.4), -3px 3px rgba(153,153,153,.2), -2px 2px rgba(179,179,179,.2), -1px 1px rgba(179,179,179,.2), 0px 0px rgba(128,128,128,.5), 1px -1px rgba(77,77,77,.6), 2px -2px rgba(77,77,77,.7), 3px -3px rgba(82,82,82,.8), 4px -4px rgba(77,77,77,.9), 5px -5px rgba(77,77,77,1); -} + text-shadow: -4px 4px rgba(179, 179, 179, 0.4), + -3px 3px rgba(153, 153, 153, 0.2), -2px 2px rgba(179, 179, 179, 0.2), + -1px 1px rgba(179, 179, 179, 0.2), 0px 0px rgba(128, 128, 128, 0.5), + 1px -1px rgba(77, 77, 77, 0.6), 2px -2px rgba(77, 77, 77, 0.7), + 3px -3px rgba(82, 82, 82, 0.8), 4px -4px rgba(77, 77, 77, 0.9), + 5px -5px rgba(77, 77, 77, 1); + } -40% { - font-size: 48px; - color: transparent; - text-shadow: -4px 4px rgba(179,179,179,.4), -3px 3px rgba(153,153,153,.2), -2px 2px rgba(179,179,179,.2), -1px 1px rgba(179,179,179,.2), 0px 0px rgba(128,128,128,.5), 1px -1px rgba(77,77,77,.6), 2px -2px rgba(77,77,77,.7), 3px -3px rgba(82,82,82,.8), 4px -4px rgba(77,77,77,.9), 5px -5px rgba(77,77,77,1); + 40% { + font-size: 48px; + color: transparent; + text-shadow: -4px 4px rgba(179, 179, 179, 0.4), + -3px 3px rgba(153, 153, 153, 0.2), -2px 2px rgba(179, 179, 179, 0.2), + -1px 1px rgba(179, 179, 179, 0.2), 0px 0px rgba(128, 128, 128, 0.5), + 1px -1px rgba(77, 77, 77, 0.6), 2px -2px rgba(77, 77, 77, 0.7), + 3px -3px rgba(82, 82, 82, 0.8), 4px -4px rgba(77, 77, 77, 0.9), + 5px -5px rgba(77, 77, 77, 1); + } - -} + 50% { + font-size: 60px; + color: transparent; + text-shadow: -4px 4px rgba(179, 179, 179, 0.4), + -3px 3px rgba(153, 153, 153, 0.2), -2px 2px rgba(179, 179, 179, 0.2), + -1px 1px rgba(179, 179, 179, 0.2), 0px 0px rgba(128, 128, 128, 0.5), + 1px -1px rgba(77, 77, 77, 0.6), 2px -2px rgba(77, 77, 77, 0.7), + 3px -3px rgba(82, 82, 82, 0.8), 4px -4px rgba(77, 77, 77, 0.9), + 5px -5px rgba(77, 77, 77, 1); + } -50% { - font-size: 60px; - color: transparent; - text-shadow: -4px 4px rgba(179,179,179,.4), -3px 3px rgba(153,153,153,.2), -2px 2px rgba(179,179,179,.2), -1px 1px rgba(179,179,179,.2), 0px 0px rgba(128,128,128,.5), 1px -1px rgba(77,77,77,.6), 2px -2px rgba(77,77,77,.7), 3px -3px rgba(82,82,82,.8), 4px -4px rgba(77,77,77,.9), 5px -5px rgba(77,77,77,1); - -} + 60% { + font-size: 72px; + color: transparent; + text-shadow: -4px 4px rgba(179, 179, 179, 0.4), + -3px 3px rgba(153, 153, 153, 0.2), -2px 2px rgba(179, 179, 179, 0.2), + -1px 1px rgba(179, 179, 179, 0.2), 0px 0px rgba(128, 128, 128, 0.5), + 1px -1px rgba(77, 77, 77, 0.6), 2px -2px rgba(77, 77, 77, 0.7), + 3px -3px rgba(82, 82, 82, 0.8), 4px -4px rgba(77, 77, 77, 0.9), + 5px -5px rgba(77, 77, 77, 1); + } -60% { - font-size: 72px; - color: transparent; - text-shadow: -4px 4px rgba(179,179,179,.4), -3px 3px rgba(153,153,153,.2), -2px 2px rgba(179,179,179,.2), -1px 1px rgba(179,179,179,.2), 0px 0px rgba(128,128,128,.5), 1px -1px rgba(77,77,77,.6), 2px -2px rgba(77,77,77,.7), 3px -3px rgba(82,82,82,.8), 4px -4px rgba(77,77,77,.9), 5px -5px rgba(77,77,77,1); - + 70% { + font-size: 84px; + color: transparent; + text-shadow: -4px 4px rgba(179, 179, 179, 0.4), + -3px 3px rgba(153, 153, 153, 0.2), -2px 2px rgba(179, 179, 179, 0.2), + -1px 1px rgba(179, 179, 179, 0.2), 0px 0px rgba(128, 128, 128, 0.5), + 1px -1px rgba(77, 77, 77, 0.6), 2px -2px rgba(77, 77, 77, 0.7), + 3px -3px rgba(82, 82, 82, 0.8), 4px -4px rgba(77, 77, 77, 0.9), + 5px -5px rgba(77, 77, 77, 1); + } -} + 80% { + font-size: 96px; + color: transparent; + text-shadow: -4px 4px rgba(179, 179, 179, 0.4), + -3px 3px rgba(153, 153, 153, 0.2), -2px 2px rgba(179, 179, 179, 0.2), + -1px 1px rgba(179, 179, 179, 0.2), 0px 0px rgba(128, 128, 128, 0.5), + 1px -1px rgba(77, 77, 77, 0.6), 2px -2px rgba(77, 77, 77, 0.7), + 3px -3px rgba(82, 82, 82, 0.8), 4px -4px rgba(77, 77, 77, 0.9), + 5px -5px rgba(77, 77, 77, 1); + } -70% { - font-size: 84px; - color: transparent; - text-shadow: -4px 4px rgba(179,179,179,.4), -3px 3px rgba(153,153,153,.2), -2px 2px rgba(179,179,179,.2), -1px 1px rgba(179,179,179,.2), 0px 0px rgba(128,128,128,.5), 1px -1px rgba(77,77,77,.6), 2px -2px rgba(77,77,77,.7), 3px -3px rgba(82,82,82,.8), 4px -4px rgba(77,77,77,.9), 5px -5px rgba(77,77,77,1); - -} - -80% { - font-size: 96px; - color: transparent; - text-shadow: -4px 4px rgba(179,179,179,.4), -3px 3px rgba(153,153,153,.2), -2px 2px rgba(179,179,179,.2), -1px 1px rgba(179,179,179,.2), 0px 0px rgba(128,128,128,.5), 1px -1px rgba(77,77,77,.6), 2px -2px rgba(77,77,77,.7), 3px -3px rgba(82,82,82,.8), 4px -4px rgba(77,77,77,.9), 5px -5px rgba(77,77,77,1); -} - -90% { - font-size: 104px; - color: transparent; - text-shadow: -4px 4px rgba(179,179,179,.4), -3px 3px rgba(153,153,153,.2), -2px 2px rgba(179,179,179,.2), -1px 1px rgba(179,179,179,.2), 0px 0px rgba(128,128,128,.5), 1px -1px rgba(77,77,77,.6), 2px -2px rgba(77,77,77,.7), 3px -3px rgba(82,82,82,.8), 4px -4px rgba(77,77,77,.9), 5px -5px rgba(77,77,77,1); -} - -100% { - font-size: 116px; - color: transparent; - text-shadow: -4px 4px rgba(179,179,179,.4), -3px 3px rgba(153,153,153,.2), -2px 2px rgba(179,179,179,.2), -1px 1px rgba(179,179,179,.2), 0px 0px rgba(128,128,128,.5), 1px -1px rgba(77,77,77,.6), 2px -2px rgba(77,77,77,.7), 3px -3px rgba(82,82,82,.8), 4px -4px rgba(77,77,77,.9), 5px -5px rgba(77,77,77,1); -} + 90% { + font-size: 104px; + color: transparent; + text-shadow: -4px 4px rgba(179, 179, 179, 0.4), + -3px 3px rgba(153, 153, 153, 0.2), -2px 2px rgba(179, 179, 179, 0.2), + -1px 1px rgba(179, 179, 179, 0.2), 0px 0px rgba(128, 128, 128, 0.5), + 1px -1px rgba(77, 77, 77, 0.6), 2px -2px rgba(77, 77, 77, 0.7), + 3px -3px rgba(82, 82, 82, 0.8), 4px -4px rgba(77, 77, 77, 0.9), + 5px -5px rgba(77, 77, 77, 1); + } + 100% { + font-size: 116px; + color: transparent; + text-shadow: -4px 4px rgba(179, 179, 179, 0.4), + -3px 3px rgba(153, 153, 153, 0.2), -2px 2px rgba(179, 179, 179, 0.2), + -1px 1px rgba(179, 179, 179, 0.2), 0px 0px rgba(128, 128, 128, 0.5), + 1px -1px rgba(77, 77, 77, 0.6), 2px -2px rgba(77, 77, 77, 0.7), + 3px -3px rgba(82, 82, 82, 0.8), 4px -4px rgba(77, 77, 77, 0.9), + 5px -5px rgba(77, 77, 77, 1); + } } .shadow { animation: shadow 2s infinite; animation-direction: alternate; - animation-timing-function: linear; + animation-timing-function: linear; animation-fill-mode: forwards; } .shadow:hover { transform: rotate3d(2, -1, -1, -0.2turn); -} \ No newline at end of file +} diff --git a/animations/shimmy.css b/animations/shimmy.css index fcc1028d..67928e83 100644 --- a/animations/shimmy.css +++ b/animations/shimmy.css @@ -1,43 +1,23 @@ /** @format */ -@-webkit-keyframes shimmy { - from, - to { - -webkit-transform: translate(2px, 0); - -webkit-transform: rotate(1deg); - transform: translate(2px, 0); - transform: rotate(2deg); +@keyframes shimmy { + 0% { + transform: translate(2px, 0); + transform: rotate(2deg); } - 50% { - -webkit-transform: translate(-2px,0); - -webkit-transform: rotate(-1deg); transform: translate(-2px, 0); - transform: rotate(-2deg); - }, - + transform: rotate(-2deg); + } 100% { - -webkit-transform: translate(2px,0); - -webkit-transform: rotate(1deg); - transform: translate(2px, 0); - transform: rotate(2deg);} + transform: translate(2px, 0); + transform: rotate(2deg); } } - -@keyframes shimmy { - 0% { transform: translate(2px, 0); - transform: rotate(2deg);} - 50% { transform: translate(-2px, 0); - transform: rotate(-2deg);} - 100% { transform: translate(2px, 0); - transform: rotate(2deg);} -} - - .shimmy { -webkit-animation-name: shimmy; animation-name: shimmy; animation: shimmy 200ms infinite; - animation-timing-function: linear; + animation-timing-function: linear; } diff --git a/animations/slasher.css b/animations/slasher.css index 7b11928c..92eb8529 100644 --- a/animations/slasher.css +++ b/animations/slasher.css @@ -3,58 +3,128 @@ * * @format */ - - .slasher { - font-family: 'Nanum Brush Script', cursive; - -webkit-animation: slasher 2s infinite; - -moz-animation: slasher 2s infinite; - -o-animation: slasher 2s infinite; - -ms-animation: slasher 2s infinite; - animation: slasher 2s infinite; + +.slasher { + font-family: 'Nanum Brush Script', cursive; + -webkit-animation: slasher 2s infinite; + -moz-animation: slasher 2s infinite; + -o-animation: slasher 2s infinite; + -ms-animation: slasher 2s infinite; + animation: slasher 2s infinite; } @-webkit-keyframes slasher { - 0% { color: #ff0000; } - 20% { color: #e60000; } - 40% { color: #b30000; } - 50% { color: #800000; } - 60% { color: #b30000; } - 80% { color: #e60000; } - 100% { color: #ff0000; } + 0% { + color: #ff0000; + } + 20% { + color: #e60000; + } + 40% { + color: #b30000; + } + 50% { + color: #800000; + } + 60% { + color: #b30000; + } + 80% { + color: #e60000; + } + 100% { + color: #ff0000; + } } @-moz-keyframes slasher { - 0% { color: #ff0000; } - 20% { color: #e60000; } - 40% { color: #b30000; } - 50% { color: #800000; } - 60% { color: #b30000; } - 80% { color: #e60000; } - 100% { color: #ff0000; } + 0% { + color: #ff0000; + } + 20% { + color: #e60000; + } + 40% { + color: #b30000; + } + 50% { + color: #800000; + } + 60% { + color: #b30000; + } + 80% { + color: #e60000; + } + 100% { + color: #ff0000; + } } @-ms-keyframes slasher { - 0% { color: #ff0000; } - 20% { color: #e60000; } - 40% { color: #b30000; } - 50% { color: #800000; } - 60% { color: #b30000; } - 80% { color: #e60000; } - 100% { color: #ff0000; } + 0% { + color: #ff0000; + } + 20% { + color: #e60000; + } + 40% { + color: #b30000; + } + 50% { + color: #800000; + } + 60% { + color: #b30000; + } + 80% { + color: #e60000; + } + 100% { + color: #ff0000; + } } @-o-keyframes slasher { - 0% { color: #ff0000; } - 20% { color: #e60000; } - 40% { color: #b30000; } - 50% { color: #800000; } - 60% { color: #b30000; } - 80% { color: #e60000; } - 100% { color: #ff0000; } + 0% { + color: #ff0000; + } + 20% { + color: #e60000; + } + 40% { + color: #b30000; + } + 50% { + color: #800000; + } + 60% { + color: #b30000; + } + 80% { + color: #e60000; + } + 100% { + color: #ff0000; + } } @keyframes slasher { - 0% { color: #ff0000; } - 20% { color: #e60000; } - 40% { color: #b30000; } - 50% { color: #800000; } - 60% { color: #b30000; } - 80% { color: #e60000; } - 100% { color: #ff0000; } -} \ No newline at end of file + 0% { + color: #ff0000; + } + 20% { + color: #e60000; + } + 40% { + color: #b30000; + } + 50% { + color: #800000; + } + 60% { + color: #b30000; + } + 80% { + color: #e60000; + } + 100% { + color: #ff0000; + } +} diff --git a/animations/spotlight.css b/animations/spotlight.css index 0a0316b4..4c1f2caa 100644 --- a/animations/spotlight.css +++ b/animations/spotlight.css @@ -4,28 +4,26 @@ * @format */ - - .spotlight { - position: relative; - text-transform: uppercase; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - font-size: 2em; - letter-spacing: 2px; - overflow: hidden; - background: linear-gradient(90deg, #51283B, #fff, #51283B); - background-repeat: no-repeat; - background-size: 50%; - animation: animate 4s linear infinite; - -webkit-background-clip: text; - -webkit-text-fill-color: rgba(255, 255, 255, 0); + position: relative; + text-transform: uppercase; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 2em; + letter-spacing: 2px; + overflow: hidden; + background: linear-gradient(90deg, #51283b, #fff, #51283b); + background-repeat: no-repeat; + background-size: 50%; + animation: animate 4s linear infinite; + -webkit-background-clip: text; + -webkit-text-fill-color: rgba(255, 255, 255, 0); } @keyframes animate { - 0% { - background-position: -500%; - } - 100% { - background-position: 500%; - } -} \ No newline at end of file + 0% { + background-position: -500%; + } + 100% { + background-position: 500%; + } +} diff --git a/animations/staircase_bounce.css b/animations/staircase_bounce.css index c1639bf9..06c4a1d7 100644 --- a/animations/staircase_bounce.css +++ b/animations/staircase_bounce.css @@ -5,57 +5,53 @@ */ @keyframes staircase_bounce { - - 0% { - transform: translateY(-300px); - font-size:1.5em; - } - - 10% { - transform: translateY(-245px); - font-size:1.7em; - } - - 22% { - transform: translateY(-270px); - font-size:1.8em; - color:rgba(220,220,220,.1); - } - - 35% { - transform: translateY(-170px); - font-size:1.9em; - color:white; - } - - 49% { - transform: translateY(-240px); - font-size:2.0em; - color:rgba(220,220,220,.1); - } - - 65% { - transform: translateY(-100px); - font-size:2.2em; - color:white; - } - 80% { - transform: translateY(-150px); - font-size:2.5em; - color:rgba(220,220,220,.1); - } - to { - transform: translateY(0px); - font-size:3.0em; - color:white; - - } - + 0% { + transform: translateY(-300px); + font-size: 1.5em; + } + + 10% { + transform: translateY(-245px); + font-size: 1.7em; + } + + 22% { + transform: translateY(-270px); + font-size: 1.8em; + color: rgba(220, 220, 220, 0.1); + } + + 35% { + transform: translateY(-170px); + font-size: 1.9em; + color: white; + } + + 49% { + transform: translateY(-240px); + font-size: 2em; + color: rgba(220, 220, 220, 0.1); + } + + 65% { + transform: translateY(-100px); + font-size: 2.2em; + color: white; + } + 80% { + transform: translateY(-150px); + font-size: 2.5em; + color: rgba(220, 220, 220, 0.1); + } + to { + transform: translateY(0px); + font-size: 3em; + color: white; + } } .staircase_bounce { - animation-duration: 8s; - animation-name: staircase_bounce; - animation-iteration-count: infinite; + animation-duration: 8s; + animation-name: staircase_bounce; + animation-iteration-count: infinite; } - diff --git a/animations/star-wars-roll.css b/animations/star-wars-roll.css index 6e9ea678..a9e2bea5 100644 --- a/animations/star-wars-roll.css +++ b/animations/star-wars-roll.css @@ -6,13 +6,13 @@ @keyframes star-wars-roll { 0% { - top: 100px; - transform: perspective(300px) rotateX(25deg); - } - 100% { - top: -150px; - transform: perspective(50px) rotateX(50deg); - } + top: 100px; + transform: perspective(300px) rotateX(25deg); + } + 100% { + top: -150px; + transform: perspective(50px) rotateX(50deg); + } } .star-wars-roll { diff --git a/animations/the-shining.css b/animations/the-shining.css index 3da39137..1601f904 100644 --- a/animations/the-shining.css +++ b/animations/the-shining.css @@ -1,30 +1,32 @@ +/** @format */ + body { - margin: 0; - padding: 0; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; } .the-shining { - position: relative; - font-size: 2em; - letter-spacing: 4px; - overflow: hidden; - background: linear-gradient(90deg, #5c2a9c, #37b19e, #9059d8); - background-repeat: no-repeat; - background-size: 80%; - animation: animate 3s linear infinite; - -webkit-background-clip: text; - -webkit-text-fill-color: rgba(255, 255, 255, 0); + position: relative; + font-size: 2em; + letter-spacing: 4px; + overflow: hidden; + background: linear-gradient(90deg, #5c2a9c, #37b19e, #9059d8); + background-repeat: no-repeat; + background-size: 80%; + animation: animate 3s linear infinite; + -webkit-background-clip: text; + -webkit-text-fill-color: rgba(255, 255, 255, 0); } @keyframes animate { - 0% { - background-position: -500%; - } - 100% { - background-position: 500%; - } -} \ No newline at end of file + 0% { + background-position: -500%; + } + 100% { + background-position: 500%; + } +} diff --git a/animations/zoomOut.css b/animations/zoomOut.css index 9bee19f6..9114d3c6 100644 --- a/animations/zoomOut.css +++ b/animations/zoomOut.css @@ -5,39 +5,39 @@ */ @-webkit-keyframes zoomOut { - from { - opacity: 1; - } + from { + opacity: 1; + } - 50% { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); - } + 50% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } - to { - opacity: 0; - } + to { + opacity: 0; + } } @keyframes zoomOut { - from { - opacity: 1; - } + from { + opacity: 1; + } - 50% { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); - } + 50% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } - to { - opacity: 0; - } + to { + opacity: 0; + } } .zoomOut { - -webkit-animation-name: zoomOut; - animation-name: zoomOut; - animation-duration: 1s; + -webkit-animation-name: zoomOut; + animation-name: zoomOut; + animation-duration: 1s; }