Just an array of animated table flipping text emoticons. Their original states are even copypasteable!
A Pen by Jon Kantner on CodePen.
Just an array of animated table flipping text emoticons. Their original states are even copypasteable!
A Pen by Jon Kantner on CodePen.
<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> |
*, *: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)} | |
} |