<div class="fightClub"></div>
*, *:before, *:after { box-sizing: border-box; }
body {
background-color: #302E26;
}
.fightClub {
position: relative;
width: 8px;
height: 8px;
margin: 360px auto;
background-color: #23211B; /* Bottom left pixel */
box-shadow:
8px 0px #23211B, /* Next two pixels */
16px 0px #23211B,
24px 0px #030606, /* Left foot */
32px 0px #23211B, /* Next three pixels */
40px 0px #23211B,
48px 0px #23211B,
56px 0px #030606, /* Right foot */
64px 0px #23211B, /* Next pixel */
72px 0px #CECECF, /* Left foot Bob */
80px 0px #23211B, /* Next 7 pixels */
88px 0px #23211B,
96px 0px #23211B,
104px 0px #23211B,
112px 0px #23211B,
120px 0px #23211B,
128px 0px #23211B,
136px 0px #CECECF, /* Right foot bob */
144px 0px #23211B, /* Next two pixels */
152px 0px #23211B,
/* Level 2 */
24px -8px #5E5E48, /* Left leg */
56px -8px #4A493A, /* Right leg */
72px -8px #1D2427, /* Left leg Bob */
136px -8px #1D2427, /* Right leg Bob */
/* Level 3 */
24px -16px #5E5E48,
56px -16px #4A493A,
72px -16px #1D2427,
136px -16px #1D2427,
/* Level 4 */
24px -24px #5E5E48,
56px -24px #4A493A,
72px -24px #1D2427,
136px -24px #1D2427,
/* Level 5 */
24px -32px #5E5E48,
56px -32px #4A493A,
72px -32px #1D2427,
128px -32px #1D2427,
136px -32px #1D2427,
/* Level 6 */
24px -40px #5E5E48,
56px -40px #4A493A,
72px -40px #1D2427,
128px -40px #1D2427,
136px -40px #1D2427,
/* Level 7 */
24px -48px #5E5E48,
56px -48px #4A493A,
72px -48px #181B1D,
128px -48px #1D2427,
136px -48px #1D2427,
/* Level 8 */
24px -56px #5E5E48,
56px -56px #4A493A,
72px -56px #181B1D,
128px -56px #1D2427,
136px -56px #1D2427,
/* Level 9 */
24px -64px #5E5E48,
32px -64px #5E5E48,
56px -64px #4A493A,
64px -64px #181B1D,
72px -64px #181B1D,
120px -64px #181B1D,
128px -64px #1D2427,
136px -64px #1D2427,
/* Level 10 */
24px -72px #5E5E48,
32px -72px #5E5E48,
56px -72px #4A493A,
64px -72px #181B1D,
72px -72px #181B1D,
120px -72px #181B1D,
128px -72px #1D2427,
136px -72px #1D2427,
/* Level 11 */
24px -80px #5E5E48,
32px -80px #5E5E48,
56px -80px #4A493A,
64px -80px #181B1D,
72px -80px #181B1D,
120px -80px #181B1D,
128px -80px #1D2427,
136px -80px #1D2427,
/* Level 12 */
24px -88px #5E5E48,
32px -88px #5E5E48,
56px -88px #4A493A,
64px -88px #181B1D,
72px -88px #181B1D,
120px -88px #1D2427,
128px -88px #1D2427,
136px -88px #1D2427,
/* Level 13 */
24px -96px #5E5E48,
32px -96px #5E5E48,
56px -96px #4A493A,
64px -96px #181B1D,
72px -96px #181B1D,
120px -96px #1D2427,
128px -96px #1D2427,
136px -96px #1D2427,
/* Level 14 */
24px -104px #5E5E48,
32px -104px #5E5E48,
56px -104px #4A493A,
64px -104px #181B1D,
72px -104px #181B1D,
112px -104px #181B1D,
120px -104px #1D2427,
128px -104px #1D2427,
136px -104px #1D2427,
/* Level 15 */
24px -112px #5E5E48,
32px -112px #5E5E48,
56px -112px #4A493A,
64px -112px #181B1D,
72px -112px #181B1D,
80px -112px #181B1D,
88px -112px #181B1D,
96px -112px #181B1D,
104px -112px #181B1D,
112px -112px #181B1D,
120px -112px #1D2427,
128px -112px #1D2427,
136px -112px #1D2427,
/* Level 16 */
24px -120px #5E5E48,
32px -120px #5E5E48,
56px -120px #4A493A,
64px -120px #181B1D,
72px -120px #181B1D,
80px -120px #181B1D,
88px -120px #181B1D,
96px -120px #181B1D,
104px -120px #181B1D,
112px -120px #1D2427,
120px -120px #1D2427,
128px -120px #1D2427,
136px -120px #1D2427,
/* Level 17 */
24px -128px #5E5E48,
32px -128px #5E5E48,
56px -128px #4A493A,
64px -128px #181B1D,
72px -128px #181B1D,
80px -128px #181B1D,
88px -128px #181B1D,
96px -128px #181B1D,
104px -128px #181B1D,
112px -128px #181B1D,
120px -128px #181B1D,
128px -128px #1D2427,
136px -128px #1D2427,
144px -128px #374144,
/* Level 18, Crotch */
24px -136px #5E5E48,
32px -136px #5E5E48,
40px -136px #4A493A,
48px -136px #4A493A,
56px -136px #4A493A,
64px -136px #374144,
72px -136px #181B1D,
80px -136px #181B1D,
88px -136px #181B1D,
96px -136px #181B1D,
104px -136px #181B1D,
112px -136px #181B1D,
120px -136px #181B1D,
128px -136px #181B1D,
136px -136px #374144,
144px -136px #374144,
/* Level 19 */
24px -144px #5E5E48,
32px -144px #5E5E48,
40px -144px #5E5E48,
48px -144px #5E5E48,
56px -144px #4A493A,
64px -144px #374144,
72px -144px #6B868D,
80px -144px #181B1D,
88px -144px #181B1D,
96px -144px #181B1D,
104px -144px #181B1D,
112px -144px #181B1D,
120px -144px #181B1D,
128px -144px #455057,
136px -144px #6B868D,
144px -144px #374144,
/* Level 20 */
24px -152px #CECECF,
32px -152px #CECECF,
40px -152px #CECECF,
48px -152px #CECECF,
56px -152px #CECECF,
64px -152px #374144,
72px -152px #374144,
80px -152px #181B1D,
88px -152px #181B1D,
96px -152px #181B1D,
104px -152px #181B1D,
112px -152px #181B1D,
120px -152px #455057,
128px -152px #455057,
136px -152px #455057,
144px -152px #455057,
/* Level 21 */
24px -160px #E6E7E7,
32px -160px #CECECF,
40px -160px #CECECF,
48px -160px #CECECF,
56px -160px #0F1010,
64px -160px #374144,
72px -160px #6B868D,
80px -160px #374144,
88px -160px #6B868D,
96px -160px #455057,
104px -160px #95B0BC,
112px -160px #455057,
120px -160px #95B0BC,
128px -160px #455057,
136px -160px #95B0BC,
144px -160px #455057,
152px -160px #95B0BC,
/* Level 22 */
24px -168px #E6E7E7,
32px -168px #CECECF,
40px -168px #CECECF,
48px -168px #A73F3E,
56px -168px #0F1010,
64px -168px #374144,
72px -168px #374144,
80px -168px #374144,
88px -168px #374144,
96px -168px #374144,
104px -168px #374144,
112px -168px #374144,
120px -168px #455057,
128px -168px #455057,
136px -168px #455057,
144px -168px #455057,
152px -168px #455057,
/* Level 23 */
24px -176px #E6E7E7,
32px -176px #E6E7E7,
40px -176px #CECECF,
48px -176px #CECECF,
56px -176px #0F1010,
64px -176px #374144,
72px -176px #6B868D,
80px -176px #374144,
88px -176px #6B868D,
96px -176px #374144,
104px -176px #6B868D,
112px -176px #455057,
120px -176px #95B0BC,
128px -176px #455057,
136px -176px #95B0BC,
144px -176px #455057,
152px -176px #95B0BC,
/* Level 24 */
24px -184px #E6E7E7,
32px -184px #CECECF,
40px -184px #E6E7E7,
48px -184px #E6E7E7,
56px -184px #E6E7E7,
64px -184px #E6E7E7,
72px -184px #374144,
80px -184px #374144,
88px -184px #374144,
96px -184px #374144,
104px -184px #374144,
112px -184px #455057,
120px -184px #455057,
128px -184px #455057,
136px -184px #455057,
144px -184px #455057,
152px -184px #455057,
/* Level 25 */
24px -192px #E6E7E7,
32px -192px #E6E7E7,
40px -192px #E6E7E7,
48px -192px #E6E7E7,
56px -192px #E6E7E7,
64px -192px #E6E7E7,
72px -192px #C09A7C,
80px -192px #C09A7C,
88px -192px #C09A7C,
96px -192px #C09A7C,
104px -192px #C09A7C,
112px -192px #C09A7C,
120px -192px #6B868D,
128px -192px #455057,
136px -192px #95B0BC,
144px -192px #455057,
152px -192px #95B0BC,
/* Level 26 */
24px -200px #E6E7E7,
32px -200px #E6E7E7,
40px -200px #CECECF,
48px -200px #CECECF,
56px -200px #0F1010,
64px -200px #374144,
72px -200px #374144,
80px -200px #374144,
88px -200px #374144,
96px -200px #374144,
104px -200px #374144,
112px -200px #374144,
120px -200px #374144,
128px -200px #374144,
136px -200px #374144,
144px -200px #374144,
152px -200px #455057,
/* Level 27 */
24px -208px #E6E7E7,
32px -208px #E6E7E7,
40px -208px #E6E7E7,
48px -208px #AF8E75,
56px -208px #AF8E75,
64px -208px #AF8E75,
72px -208px #0A0A0C,
80px -208px #947B69,
88px -208px #947B69,
96px -208px #947B69,
104px -208px #947B69,
112px -208px #947B69,
120px -208px #947B69,
128px -208px #374144,
136px -208px #6B868D,
144px -208px #374144,
152px -208px #95B0BC,
/* Level 28 */
32px -216px #E6E7E7,
40px -216px #E6E7E7,
48px -216px #E6E7E7,
56px -216px #0F1010,
64px -216px #AF8E75,
72px -216px #0A0A0C,
80px -216px #AF8E75,
88px -216px #AF8E75,
96px -216px #AF8E75,
104px -216px #AF8E75,
112px -216px #AF8E75,
120px -216px #AF8E75,
128px -216px #AF8E75,
136px -216px #AF8E75,
144px -216px #374144,
152px -216px #455057,
/* Level 29 */
32px -224px #E6E7E7,
40px -224px #E6E7E7,
48px -224px #E6E7E7,
56px -224px #0F1010,
64px -224px #374144,
72px -224px #6B868D,
80px -224px #AF8E75,
88px -224px #C09A7C,
96px -224px #AF8E75,
104px -224px #C09A7C,
112px -224px #C09A7C,
120px -224px #C09A7C,
128px -224px #C09A7C,
136px -224px #AF8E75,
144px -224px #374144,
/* Level 30 */
32px -232px #E6E7E7,
40px -232px #E6E7E7,
48px -232px #0F1010,
56px -232px #CECECF,
64px -232px #374144,
72px -232px #374144,
80px -232px #374144,
88px -232px #374144,
96px -232px #C09A7C,
104px -232px #C09A7C,
112px -232px #C09A7C,
120px -232px #C09A7C,
128px -232px #C09A7C,
136px -232px #C09A7C,
144px -232px #455057,
/* Level 31 */
40px -240px #E6E7E7,
48px -240px #E6E7E7,
56px -240px #AF8E75,
64px -240px #374144,
72px -240px #6B868D,
80px -240px #455057,
88px -240px #95B0BC,
96px -240px #374144,
104px -240px #6B868D,
112px -240px #374144,
120px -240px #95B0BC,
128px -240px #455057,
136px -240px #95B0BC,
144px -240px #455057,
/* Level 32 */
40px -248px #E6E7E7,
48px -248px #AF8E75,
/*56px -248px #947B69,*/
64px -248px #374144,
72px -248px #374144,
80px -248px #374144,
88px -248px #455057,
96px -248px #455057,
104px -248px #374144,
112px -248px #374144,
120px -248px #455057,
128px -248px #455057,
136px -248px #455057,
144px -248px #455057,
/* Level 33 */
/*48px -256px #C09A7C,
56px -256px #C09A7C,
64px -256px #AF8E75,
72px -256px #A5787B,*/
80px -256px #374144,
88px -256px #95B0BC,
96px -256px #455057,
104px -256px #95B0BC,
112px -256px #374144,
120px -256px #95B0BC,
128px -256px #455057,
136px -256px #95B0BC,
144px -256px #455057,
/* Level 34 */
/*40px -264px #C09A7C,
48px -264px #A5787B,
56px -264px #A5787B,
64px -264px #C09A7C,
72px -264px #AF8E75,*/
80px -264px #374144,
88px -264px #455057,
96px -264px #455057,
104px -264px #455057,
112px -264px #455057,
120px -264px #455057,
128px -264px #455057,
136px -264px #455057,
144px -264px #455057,
/* Level 35 */
/*40px -272px #654E3A,
48px -272px #C09A7C,
56px -272px #93696D,
64px -272px #C09A7C,
72px -272px #947B6A,*/
80px -272px #374144,
88px -272px #6B868D,
96px -272px #374144,
104px -272px #6B868D,
112px -272px #455057,
120px -272px #95B0BC,
128px -272px #455057,
136px -272px #95B0BC,
144px -272px #455057,
/* Level 36 */
/*40px -280px #4F3C2D,
48px -280px #4F3C2D,
56px -280px #A5787B,
64px -280px #C09A7C,
72px -280px #AF8D76,*/
80px -280px #7C6758,
88px -280px #374144,
96px -280px #374144,
104px -280px #374144,
112px -280px #455057,
120px -280px #455057,
128px -280px #455057,
136px -280px #455057,
144px -280px #455057,
/* Level 37 */
/*40px -288px #654E3A,
48px -288px #654E3A,
56px -288px #654E3A,
64px -288px #654E3A,*/
72px -288px #6B868D,
80px -288px #7C6758,
88px -288px #947B6A,
96px -288px #374144,
104px -288px #6B868D,
112px -288px #455057,
120px -288px #95B0BC,
128px -288px #455057,
136px -288px #95B0BC,
/* Level 38 */
/*64px -296px #654E3A,*/
72px -296px #AF8D76,
80px -296px #AF8D76,
88px -296px #AF8D76,
96px -296px #C0997D,
104px -296px #374144,
112px -296px #455057,
120px -296px #455057,
128px -296px #455057,
136px -296px #455057,
/* Level 39 */
72px -304px #AF8D76,
80px -304px #C0997D,
88px -304px #C0997D,
96px -304px #C0997D,
104px -304px #AF8D76,
112px -304px #374144,
120px -304px #95B0BC,
/* Level 40 */
72px -312px #947B6A,
80px -312px #C0997D,
88px -312px #947B6A,
96px -312px #C0997D,
104px -312px #C0997D,
112px -312px #3F3333,
/* Level 41 */
72px -320px #AF8D76,
80px -320px #C0997D,
88px -320px #C0997D,
96px -320px #C0997D,
104px -320px #3F3333,
112px -320px #3F3333,
/* Level 42 */
72px -328px #AF8D76,
80px -328px #C0997D,
88px -328px #C0997D,
96px -328px #C0997D,
104px -328px #3F3333,
112px -328px #3F3333,
/* Level 43 */
72px -336px #554747,
80px -336px #554747,
88px -336px #554747,
96px -336px #554747,
104px -336px #554747;
}
/* Head */
.fightClub:before {
position: absolute;
content: '';
bottom: 248px;
left: 56px;
width: 8px;
height: 8px;
background-color: #947B68;
animation: fight 10s infinite;
box-shadow:
/* Level 1 */
-8px -8px #C0997D,
0px -8px #C0997D,
8px -8px #AF8F74,
16px -8px #A6787B,
/* Level 2 */
-16px -16px #C0997D,
-8px -16px #A6787B,
0px -16px #A6787B,
8px -16px #C0997D,
16px -16px #AF8F74,
/* Level 3 */
-16px -24px #654E3A,
-8px -24px #C09A7C,
0px -24px #93696D,
8px -24px #C09A7C,
16px -24px #947B69,
/* Level 4 */
-16px -32px #4F3C2C,
-8px -32px #4F3C2C,
0px -32px #A6787B,
8px -32px #C09B7A,
16px -32px #AF8E75,
/* Level 5 */
-16px -40px #654E39,
-8px -40px #654E39,
0px -40px #654E39,
8px -40px #654E39,
16px -40px #4F3C2C,
/* Level 6 */
8px -48px #654E39;
}
/* Tyler */
.fightClub:after {
position: absolute;
content: '';
bottom: 0px;
left: -180px;
width: 8px;
height: 8px;
background-color: #23211B;
animation: tyler 6s infinite;
box-shadow:
8px 0px #060509,
16px 0px #23211B,
24px 0px #23211B,
32px 0px #23211B,
40px 0px #060509,
48px 0px #23211B,
56px 0px #23211B,
64px 0px #23211B,
/* Level 2 */
8px -8px #060509,
40px -8px #060509,
/* Level 3 */
8px -16px #060509,
40px -16px #060509,
/* Level 4 */
8px -24px #060509,
40px -24px #060509,
/* Level 5 */
8px -32px #060509,
40px -32px #060509,
/* Level 6 */
8px -40px #060509,
40px -40px #060509,
/* Level 7 */
8px -48px #060509,
40px -48px #060509,
/* Level 8 */
0px -56px #060509,
8px -56px #060509,
32px -56px #060509,
40px -56px #060509,
/* Level 9 */
0px -64px #060509,
8px -64px #060509,
32px -64px #060509,
40px -64px #060509,
/* Level 10 */
0px -72px #060509,
8px -72px #060509,
32px -72px #060509,
40px -72px #060509,
/* Level 11 */
0px -80px #060509,
8px -80px #060509,
32px -80px #060509,
40px -80px #060509,
/* Level 12 */
0px -88px #060509,
8px -88px #060509,
32px -88px #060509,
40px -88px #060509,
/* Level 13 */
-8px -96px #C0997D,
0px -96px #060509,
8px -96px #060509,
32px -96px #060509,
40px -96px #060509,
48px -96px #AF8D76,
/* Level 14 */
-8px -104px #C0997D,
0px -104px #060509,
8px -104px #060509,
32px -104px #060509,
40px -104px #060509,
48px -104px #AF8D76,
/* Level 15 */
-8px -112px #A4312B,
0px -112px #060509,
8px -112px #060509,
32px -112px #060509,
40px -112px #060509,
48px -112px #7C2122,
/* Level 16 */
-8px -120px #A4312B,
0px -120px #060509,
8px -120px #060509,
32px -120px #060509,
40px -120px #060509,
48px -120px #7C2122,
/* Level 17 */
-8px -128px #A4312B,
0px -128px #8A2624,
8px -128px #060509,
16px -128px #060509,
24px -128px #060509,
32px -128px #A4312B,
40px -128px #8A2624,
48px -128px #7C2122,
/* Level 18 */
-8px -136px #A4312B,
0px -136px #8A2624,
8px -136px #ECDBCB,
16px -136px #060509,
24px -136px #D5C5B9,
32px -136px #A4312B,
40px -136px #8A2624,
48px -136px #7C2122,
/* Level 19 */
-8px -144px #A4312B,
0px -144px #8A2624,
8px -144px #ECDBCB,
16px -144px #C0997D,
24px -144px #D5C5B9,
32px -144px #A4312B,
40px -144px #8A2624,
48px -144px #7C2122,
/* Level 20 */
-8px -152px #A4312B,
0px -152px #8A2624,
8px -152px #D5C5B9,
16px -152px #AF8D76,
24px -152px #0A0606,
32px -152px #8A2624,
40px -152px #A4312B,
48px -152px #7C2122,
/* Level 21 */
0px -160px #8A2624,
8px -160px #0A0606,
16px -160px #ECDBCB,
24px -160px #D5C5B9,
32px -160px #8A2624,
40px -160px #A4312B,
48px -160px #7C2122,
/* Level 22 */
0px -168px #A4312B,
8px -168px #ECDBCB,
16px -168px #0A0606,
24px -168px #D5C5B9,
32px -168px #8A2624,
40px -168px #A4312B,
48px -168px #7C2122,
/* Level 23 */
0px -176px #A4312B,
8px -176px #ECDBCB,
16px -176px #ECDBCB,
24px -176px #D5C5B9,
32px -176px #8A2624,
40px -176px #A4312B,
48px -176px #7C2122,
/* Level 24 */
0px -184px #A4312B,
8px -184px #ECDBCB,
16px -184px #ECDBCB,
24px -184px #0A0606,
32px -184px #A4312B,
40px -184px #7C2122,
48px -184px #7C2122,
/* Level 25 */
0px -192px #A4312B,
8px -192px #0A0606,
16px -192px #ECDBCB,
24px -192px #D5C5B9,
32px -192px #7C2122,
40px -192px #7C2122,
/* Level 26 */
0px -200px #A4312B,
8px -200px #ECDBCB,
16px -200px #0A0606,
24px -200px #D5C5B9,
32px -200px #7C2122,
40px -200px #7C2122,
/* Level 27 */
0px -208px #A4312B,
8px -208px #ECDBCB,
16px -208px #ECDBCB,
24px -208px #D5C5B9,
32px -208px #A4312B,
40px -208px #7C2122,
/* Level 28 */
0px -216px #A4312B,
8px -216px #ECDBCB,
16px -216px #ECDBCB,
24px -216px #0A0606,
32px -216px #A4312B,
40px -216px #7C2122,
/* Level 29 */
0px -224px #ECDBCB,
8px -224px #0A0606,
16px -224px #ECDBCB,
24px -224px #D5C5B9,
32px -224px #D5C5B9,
40px -224px #7C2122,
/* Level 30 */
8px -232px #ECDBCB,
16px -232px #C0997D,
24px -232px #ECDBCB,
32px -232px #D5C5B9,
/* Level 31 */
8px -240px #ECDBCB,
16px -240px #AF8D76,
24px -240px #ECDBCB,
/* Level 32 */
16px -248px #947B6A,
24px -248px #947B6A,
/* Level 33 */
0px -256px #C0997D,
8px -256px #C0997D,
16px -256px #AF8D76,
24px -256px #AF8D76,
/* Level 33 */
0px -264px #C0997D,
8px -264px #C0997D,
16px -264px #A4787A,
24px -264px #A4787A,
32px -264px #AF8D76,
/* Level 34 */
0px -272px #030606,
8px -272px #C0997D,
16px -272px #030606,
24px -272px #AF8D76,
32px -272px #3A2C23,
/* Level 35 */
0px -280px #C0997D,
8px -280px #C0997D,
16px -280px #C0997D,
24px -280px #3A2C23,
32px -280px #3A2C23,
/* Level 36 */
0px -288px #48372B,
8px -288px #48372B,
16px -288px #48372B,
24px -288px #3A2C23,
32px -288px #3A2C23,
/* Level 37 */
0px -296px #48372B,
16px -296px #48372B;
}
@keyframes fight {
0% { bottom: 248px; }
1.99% { bottom: 248px; }
2% { bottom: 240px; }
3.99% { bottom: 240px; }
4% { bottom: 248px; }
5.99% { bottom: 248px; }
6% { bottom: 240px; }
7.99% { bottom: 240px; }
8% { bottom: 248px; }
9.99% { bottom: 248px; }
10% { bottom: 240px; }
11.99% { bottom: 240px; }
12% { bottom: 248px; }
13.99% { bottom: 248px; }
14% { bottom: 240px; }
15.99% { bottom: 240px; }
16% { bottom: 248px; }
17.99% { bottom: 248px; }
18% { bottom: 240px; }
19.99% { bottom: 240px; }
20% { bottom: 248px; }
21.99% { bottom: 248px; }
22% { bottom: 240px; }
23.99% { bottom: 240px; }
24% { bottom: 248px; }
25.99% { bottom: 248px; }
26% { bottom: 240px; }
27.99% { bottom: 240px; }
28% { bottom: 248px; }
29.99% { bottom: 248px; }
30% { bottom: 240px; }
31.99% { bottom: 240px; }
32% { bottom: 248px; }
33.99% { bottom: 248px; }
34% { bottom: 240px; }
35.99% { bottom: 240px; }
36% { bottom: 248px; }
37.99% { bottom: 248px; }
38% { bottom: 240px; }
39.99% { bottom: 240px; }
40% { bottom: 248px; }
41.99% { bottom: 248px; }
42% { bottom: 240px; }
43.99% { bottom: 240px; }
44% { bottom: 248px; }
45.99% { bottom: 248px; }
46% { bottom: 240px; }
47.99% { bottom: 240px; }
48% { bottom: 248px; }
49.99% { bottom: 248px; }
50% { bottom: 240px; }
51.99% { bottom: 240px; }
52% { bottom: 248px; }
53.99% { bottom: 248px; }
54% { bottom: 240px; }
55.99% { bottom: 240px; }
56% { bottom: 248px; }
57.99% { bottom: 248px; }
58% { bottom: 240px; }
59.99% { bottom: 240px; }
60% { bottom: 248px; }
61.99% { bottom: 248px; }
62% { bottom: 240px; }
63.99% { bottom: 240px; }
64% { bottom: 248px; }
65.99% { bottom: 248px; }
66% { bottom: 240px; }
67.99% { bottom: 240px; }
68% { bottom: 248px; }
69.99% { bottom: 248px; }
70% { bottom: 240px; }
71.99% { bottom: 240px; }
72% { bottom: 248px; }
73.99% { bottom: 248px; }
74% { bottom: 240px; }
75.99% { bottom: 240px; }
76% { bottom: 248px; }
77.99% { bottom: 248px; }
78% { bottom: 240px; }
79.99% { bottom: 240px; }
80% { bottom: 248px; }
81.99% { bottom: 248px; }
82% { bottom: 240px; }
83.99% { bottom: 240px; }
84% { bottom: 248px; }
85.99% { bottom: 248px; }
86% { bottom: 240px; }
87.99% { bottom: 240px; }
88% { bottom: 248px; }
89.99% { bottom: 248px; }
90% { bottom: 240px; }
91.99% { bottom: 240px; }
92% { bottom: 248px; }
93.99% { bottom: 248px; }
94% { bottom: 240px; }
95.99% { bottom: 240px; }
96% { bottom: 248px; }
97.99% { bottom: 248px; }
98% { bottom: 240px; }
99.99% { bottom: 240px; }
100% { bottom: 248px; }
}
@keyframes tyler {
0% { visibility: hidden; }
49% { visibility: hidden; }
50% { visibility: visible; }
51% { visibility: hidden; }
100% { visibility: hidden; }
}
// CREDITS //
// I found the original gif on Imgur
// https://imgur.com/gallery/4u3eA
// Original:
// http://www.behance.net/najboljidizajn
// Original Authors Twitter: @najboljidizajn
// My Twitter: @monstasaurous
This Pen doesn't use any external CSS resources.