Just an array of animated table flipping text emoticons. Their original states are even copypasteable!
A Pen by Jon Kantner on CodePen.
Created
January 7, 2019 08:07
-
-
Save Raj9039852537/f5e66970f85705bfdd81ba794a6941af to your computer and use it in GitHub Desktop.
Flipping Out
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <main> | |
| <div class="a"> | |
| (<span class="a-arm">╯</span>°□°）<span class="a-arm">╯</span><span class="a-trajectory">︵</span> <span class="a-table">┻━┻</span> | |
| </div> | |
| <div class="b"> | |
| (<span class="b-arm">╯</span>°□°）<span class="b-arm">╯</span> <span class="b-table">┻━┻</span> <span class="b-table">┻━┻</span> <span class="b-table">┻━┻</span> <span class="b-table">┻━┻</span> | |
| <br> | |
| ┳━┳ <<span class="b-wheel">⊗</span><span class="b-belt"><span class="b-realbelt">===============</span></span><span class="b-wheel">⊗</span>> | |
| </div> | |
| <div class="c"> | |
| <span class="c-person">(／‵Д′)／</span>~ <span class="c-table">╧╧</span> | |
| </div> | |
| <div class="d"> | |
| <span class="d-table">┬─┬</span><span class="d-arm">ノ</span>(<span class="d-face">ಠ_ಠ</span><span class="d-arm">ノ</span>) | |
| </div> | |
| <div class="e"> | |
| （<span class="e-arm">ノ</span>○Д○）<span class="e-arm">ノ</span><span class="e-trajectory1">＝</span><span class="e-trajectory2">＝</span><span class="e-trajectory3">＝</span><span class="e-table">┠</span> | |
| </div> | |
| <div class="f"> | |
| <span class="f-r_table">┻━┻</span> <span class="f-trajectory">︵</span> <span class="f-arm">¯\</span>_༼ᴼل͜ᴼ༽_<span class="f-arm">/¯</span> <span class="f-trajectory">︵</span> <span class="f-l_table">┻━┻</span> | |
| </div> | |
| </main> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *, *:before, *:after { | |
| border: 0; | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| :root { | |
| --dur: 1s; | |
| } | |
| body { | |
| font: 24px "Helvetica Neue", Helvetica, sans-serif; | |
| line-height: 1; | |
| } | |
| main { | |
| margin: 3em auto 0; | |
| width: 20.5em; | |
| } | |
| div, span { | |
| /* outline: 1px solid red; */ | |
| } | |
| div { | |
| margin-bottom: 2em; | |
| } | |
| span { | |
| display: inline-block; | |
| } | |
| /* Emoticon parts */ | |
| .a-arm { | |
| animation: a-armMove var(--dur) linear infinite; | |
| transform-origin: 25% 25%; | |
| } | |
| .a-trajectory { | |
| animation: a-trajectory var(--dur) linear infinite; | |
| } | |
| .a-table { | |
| animation: a-tableFlip var(--dur) linear infinite; | |
| transform-origin: -33% 50%; | |
| } | |
| .b-arm { | |
| animation: b-armMove var(--dur) linear infinite; | |
| transform-origin: 25% 25%; | |
| } | |
| .b-belt, .b-belt:before { | |
| background: repeating-linear-gradient(90deg,transparent,transparent 0.25em,currentColor 0.25em,currentColor 3.3em) 0 0 / 100% 0.1em repeat-x; | |
| } | |
| .b-belt { | |
| animation: b-beltL var(--dur) linear infinite; | |
| position: relative; | |
| width: 13.2em; | |
| height: 0.8em; | |
| vertical-align: middle; | |
| } | |
| .b-realbelt { | |
| color: transparent; | |
| } | |
| .b-belt:before { | |
| animation: b-beltR var(--dur) linear infinite; | |
| background-position: 0 100%; | |
| content: ""; | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .b-table:nth-of-type(3) { | |
| animation: b-tableFlip var(--dur) linear infinite; | |
| } | |
| .b-table:nth-of-type(n + 4) { | |
| animation: b-tableMove var(--dur) linear infinite; | |
| } | |
| .b-wheel { | |
| animation: b-rotate var(--dur) linear infinite; | |
| transform-origin: 50% 60%; | |
| } | |
| .c-person { | |
| animation: c-rage var(--dur) linear infinite | |
| } | |
| .c-table { | |
| animation: c-tableSpin var(--dur) linear infinite; | |
| transform-origin: 50% 33%; | |
| } | |
| .d-arm { | |
| animation: d-armMove var(--dur) linear infinite; | |
| transform-origin: 100% 50%; | |
| } | |
| .d-face { | |
| animation: d-faceMove var(--dur) linear infinite; | |
| } | |
| .d-table { | |
| animation: d-putTableBack var(--dur) linear infinite; | |
| } | |
| .e-arm { | |
| animation: e-armMove var(--dur) linear infinite; | |
| transform-origin: 25% 75%; | |
| } | |
| .e-trajectory1 { | |
| animation: e-traj1FadeIn var(--dur) linear infinite; | |
| } | |
| .e-trajectory2 { | |
| animation: e-traj2FadeIn var(--dur) linear infinite; | |
| } | |
| .e-trajectory3 { | |
| animation: e-traj3FadeIn var(--dur) linear infinite; | |
| } | |
| .e-table { | |
| animation: e-tableFly var(--dur) linear infinite; | |
| } | |
| .f-r_table { | |
| animation: f-tableFlipRight var(--dur) linear infinite; | |
| transform-origin: 125% 50%; | |
| } | |
| .f-l_table { | |
| animation: f-tableFlipLeft var(--dur) linear infinite; | |
| transform-origin: -25% 50%; | |
| } | |
| .f-trajectory { | |
| animation: f-trajectory var(--dur) linear infinite; | |
| } | |
| .f-arm { | |
| animation: f-armMove var(--dur) linear infinite; | |
| transform-origin: 50% 100%; | |
| } | |
| /* Animations */ | |
| @keyframes a-armMove { | |
| from {transform: rotate(90deg)} | |
| 12.5%, to {transform: rotate(0deg)} | |
| } | |
| @keyframes a-trajectory { | |
| from {opacity: 0} | |
| 37.5%, to {opacity: 1} | |
| } | |
| @keyframes a-tableFlip { | |
| from {transform: rotate(-180deg)} | |
| 37.5%, to {transform: rotate(0)} | |
| } | |
| @keyframes b-armMove { | |
| from, to {transform: rotate(90deg)} | |
| 10%, 80% {transform: rotate(0deg)} | |
| } | |
| @keyframes b-beltL { | |
| from {background-position: 0 0} | |
| to {background-position: -3.3em 0} | |
| } | |
| @keyframes b-beltR { | |
| from {background-position: 0 100%} | |
| to {background-position: 3.3em 100%} | |
| } | |
| @keyframes b-rotate { | |
| from {transform: rotate(0)} | |
| to {transform: rotate(-1turn)} | |
| } | |
| @keyframes b-tableFlip { | |
| from {transform: translate(0) rotate(0)} | |
| 12.5% {transform: translate(0.5em,-2em) rotate(45deg)} | |
| 25% {transform: translate(2em,-3.5em) rotate(90deg)} | |
| 37.5% {transform: translate(3.25em,-4em) rotate(135deg)} | |
| 50% {transform: translate(4.5em,-4em) rotate(180deg)} | |
| 62.5% {transform: translate(5.75em,-4em) rotate(225deg)} | |
| 87.5% {transform: translate(8.75em,-2em) rotate(315deg)} | |
| to {transform: translate(9.85em,0) rotate(360deg)} | |
| } | |
| @keyframes b-tableMove { | |
| from {transform: translateX(0)} | |
| to {transform: translateX(-3.3em)} | |
| } | |
| @keyframes c-rage { | |
| from,10%,20%,30%,40%,50%,60%,70%,80%,90%,to{transform: translateX(0)} | |
| 5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{transform: translateX(-5%)} | |
| } | |
| @keyframes c-tableSpin { | |
| from {transform: rotate(0)} | |
| to {transform: rotate(2turn)} | |
| } | |
| @keyframes d-armMove { | |
| from {transform: scaleX(-1)} | |
| 50%, to {transform: scaleX(1)} | |
| } | |
| @keyframes d-faceMove { | |
| from {transform: translateX(1em)} | |
| 50%, to {transform: translateX(0)} | |
| } | |
| @keyframes d-putTableBack { | |
| from {transform: translateX(7.5em) rotate(180deg)} | |
| 50%, to {transform: translateX(0) rotate(0)} | |
| } | |
| @keyframes e-armMove { | |
| from {transform: rotate(90deg)} | |
| 10%, to {transform: rotate(0deg)} | |
| } | |
| @keyframes e-traj1FadeIn { | |
| from, 60% {opacity: 0} | |
| 70%, to {opacity: 1} | |
| } | |
| @keyframes e-traj2FadeIn { | |
| from, 70% {opacity: 0} | |
| 80%, to {opacity: 1} | |
| } | |
| @keyframes e-traj3FadeIn { | |
| from, 80% {opacity: 0} | |
| 90%, to {opacity: 1} | |
| } | |
| @keyframes e-tableFly { | |
| from, 6% {transform: translateX(-5em) rotate(-2.75turn)} | |
| to {transform: translateX(0) rotate(0)} | |
| } | |
| @keyframes f-tableFlipRight { | |
| from, 23% {transform: rotate(180deg)} | |
| 80%, to {transform: rotate(0)} | |
| } | |
| @keyframes f-tableFlipLeft { | |
| from, 23% {transform: rotate(-180deg)} | |
| 80%, to {transform: rotate(0)} | |
| } | |
| @keyframes f-trajectory { | |
| from, 33% {opacity: 0} | |
| 80%, to {opacity: 1} | |
| } | |
| @keyframes f-armMove { | |
| from {transform: scaleY(-1)} | |
| 33%, to {transform: scaleY(1)} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment