Skip to content

Instantly share code, notes, and snippets.

@Raj9039852537
Created January 7, 2019 08:07
Show Gist options
  • Save Raj9039852537/f5e66970f85705bfdd81ba794a6941af to your computer and use it in GitHub Desktop.
Save Raj9039852537/f5e66970f85705bfdd81ba794a6941af to your computer and use it in GitHub Desktop.
Flipping Out

Flipping Out

Just an array of animated table flipping text emoticons. Their original states are even copypasteable!

A Pen by Jon Kantner on CodePen.

License.

<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>
┳━┳ &nbsp;&nbsp;&nbsp;&lt;<span class="b-wheel">⊗</span><span class="b-belt"><span class="b-realbelt">===============</span></span><span class="b-wheel">⊗</span>&gt;
</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>
*, *: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