Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="fightClub"></div>
              
            
!

CSS

              
                *, *: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; }
}
              
            
!

JS

              
                // 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
              
            
!
999px

Console