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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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 id="ha_holder">
    <div id="ha_1"></div>
    <div id="ha_2"></div>
    <div id="ha_3"></div>
    <div id="ha_4"></div>
    <div id="ha_5"></div>
    <div id="ha_6"></div>
    <div id="ha_7"></div>
    <div id="ha_8"></div>
    <div id="ha_9"></div>
    <div id="ha_10"></div>
    <div id="ha_11"></div>
    <div id="ha_12"></div>
    <div id="ha_13"></div>
    <div id="ha_14"></div>
    <div id="ha_15"></div>
    <div id="ha_16"></div>
    <div id="ha_17"></div>
    <div id="ha_18"></div>
    <div id="ha_19"></div>
    <div id="ha_20"></div>
    <div id="ha_21"></div>
    <div id="ha_22"></div>
    <div id="ha_23"></div>
    <div id="ha_24"></div>
    <div id="ha_25"></div>
    <div id="ha_26"></div>
    <div id="ha_27"></div>
    <div id="ha_28"></div>
    <div id="ha_29"></div>
    <div id="ha_30"></div>
    <div id="ha_47">47</div>
</div>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Monda);

body
{
    background: #000;
}

#ha_holder
{
    margin: 0 auto;
    width: 288px;
    height: 195px;
    position: relative;
}

#ha_1, #ha_2, #ha_3, #ha_4, #ha_5, 
#ha_6, #ha_7, #ha_8, #ha_9, #ha_10, 
#ha_11, #ha_12, #ha_13, #ha_14, #ha_15, 
#ha_16, #ha_17, #ha_18, #ha_19, #ha_20, 
#ha_21, #ha_22, #ha_23, #ha_24, #ha_25, 
#ha_26, #ha_27, #ha_28, #ha_29, #ha_30
{
    width: 3px;
    height: 195px;
    background: #fff;
    margin-right: 3px;
    float: left;
    -webkit-animation-name:             ha_1a; 
    -webkit-animation-duration:         6s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  ease-out;
       -moz-animation-name:             ha_1a; 
       -moz-animation-duration:         6s; 
       -moz-animation-iteration-count:  infinite;
       -moz-animation-timing-function:  ease-out;
        -ms-animation-name:             ha_1a; 
        -ms-animation-duration:         6s; 
        -ms-animation-iteration-count:  infinite;
        -ms-animation-timing-function:  ease-out;
         -o-animation-name:             ha_1a; 
         -o-animation-duration:         6s; 
         -o-animation-iteration-count:  infinite;
         -o-animation-timing-function:  ease-out;
}

#ha_2
{
    -webkit-animation-name:             ha_2a;
       -moz-animation-name:             ha_2a;
        -ms-animation-name:             ha_2a;
         -o-animation-name:             ha_2a;
}

#ha_3
{
    height: 175px;
    -webkit-animation-name:             ha_3a;
       -moz-animation-name:             ha_3a;
        -ms-animation-name:             ha_3a;
         -o-animation-name:             ha_3a;
}

#ha_4
{
    width: 12px;
    height: 175px;
    -webkit-animation-name:             ha_4a;
       -moz-animation-name:             ha_4a;
        -ms-animation-name:             ha_4a;
         -o-animation-name:             ha_4a; 
}

#ha_5
{
    height: 175px;
    margin-right: 9px;
    -webkit-animation-name:             ha_5a;
       -moz-animation-name:             ha_5a;
        -ms-animation-name:             ha_5a;
         -o-animation-name:             ha_5a; 
}

#ha_6
{
    width: 6px;
    height: 175px;
    margin-right: 9px;
    -webkit-animation-name:             ha_6a;
       -moz-animation-name:             ha_6a;
        -ms-animation-name:             ha_6a;
         -o-animation-name:             ha_6a;
}

#ha_7
{
    width: 6px;
    height: 175px;
    -webkit-animation-name:             ha_7a;
       -moz-animation-name:             ha_7a;
        -ms-animation-name:             ha_7a;
         -o-animation-name:             ha_7a;
}

#ha_8
{
    height: 175px;
    -webkit-animation-name:             ha_8a;
       -moz-animation-name:             ha_8a;
        -ms-animation-name:             ha_8a;
         -o-animation-name:             ha_8a; 
}

#ha_9
{
    width: 6px;
    height: 175px;
    margin-right: 9px;
    -webkit-animation-name:             ha_9a;
       -moz-animation-name:             ha_9a;
        -ms-animation-name:             ha_9a;
         -o-animation-name:             ha_9a; 
}

#ha_10
{
    height: 175px;
    margin-right: 9px;
    -webkit-animation-name:             ha_10a;
       -moz-animation-name:             ha_10a;
        -ms-animation-name:             ha_10a;
         -o-animation-name:             ha_10a;
}

#ha_11
{
    width: 6px;
    height: 175px;
    -webkit-animation-name:             ha_11a;
       -moz-animation-name:             ha_11a;
        -ms-animation-name:             ha_11a;
         -o-animation-name:             ha_11a;
}

#ha_12
{
    height: 175px;
    margin-right: 9px;
    -webkit-animation-name:             ha_12a;
       -moz-animation-name:             ha_12a;
        -ms-animation-name:             ha_12a;
         -o-animation-name:             ha_12a;
}

#ha_13
{
    height: 175px;
    -webkit-animation-name:             ha_13a;
       -moz-animation-name:             ha_13a;
        -ms-animation-name:             ha_13a;
         -o-animation-name:             ha_13a;
}

#ha_14
{
    width: 6px;
    height: 175px;
    -webkit-animation-name:             ha_14a;
       -moz-animation-name:             ha_14a;
        -ms-animation-name:             ha_14a;
         -o-animation-name:             ha_14a;
}

#ha_15
{
    -webkit-animation-name:             ha_15a;
       -moz-animation-name:             ha_15a;
        -ms-animation-name:             ha_15a;
         -o-animation-name:             ha_15a;
}

#ha_16
{
    -webkit-animation-name:             ha_16a;
       -moz-animation-name:             ha_16a;
        -ms-animation-name:             ha_16a;
         -o-animation-name:             ha_16a;
}

#ha_17
{
    width: 9px;
    height: 175px;
    margin-right: 6px;
    -webkit-animation-name:             ha_17a;
       -moz-animation-name:             ha_17a;
        -ms-animation-name:             ha_17a;
         -o-animation-name:             ha_17a;
}

#ha_18
{
    height: 175px;
    -webkit-animation-name:             ha_18a;
       -moz-animation-name:             ha_18a;
        -ms-animation-name:             ha_18a;
         -o-animation-name:             ha_18a;
}

#ha_19
{
    height: 175px;
    -webkit-animation-name:             ha_19a;
       -moz-animation-name:             ha_19a;
        -ms-animation-name:             ha_19a;
         -o-animation-name:             ha_19a;
}

#ha_20
{
    width: 9px;
    height: 175px;
    margin-right: 6px;
    -webkit-animation-name:             ha_20a;
       -moz-animation-name:             ha_20a;
        -ms-animation-name:             ha_20a;
         -o-animation-name:             ha_20a;
}

#ha_21
{
    width: 9px;
    height: 175px;
    margin-right: 6px;
    -webkit-animation-name:             ha_21a;
       -moz-animation-name:             ha_21a;
        -ms-animation-name:             ha_21a;
         -o-animation-name:             ha_21a;
}

#ha_22
{
    height: 175px;
    -webkit-animation-name:             ha_22a;
       -moz-animation-name:             ha_22a;
        -ms-animation-name:             ha_22a;
         -o-animation-name:             ha_22a;
}

#ha_23
{
    width: 6px;
    height: 175px;
    margin-right: 6px;
    -webkit-animation-name:             ha_23a;
       -moz-animation-name:             ha_23a;
        -ms-animation-name:             ha_23a;
         -o-animation-name:             ha_23a;
}

#ha_24
{
    width: 6px;
    height: 175px;
    -webkit-animation-name:             ha_24a;
       -moz-animation-name:             ha_24a;
        -ms-animation-name:             ha_24a;
         -o-animation-name:             ha_24a;
}

#ha_25
{
    height: 175px;
    -webkit-animation-name:             ha_25a;
       -moz-animation-name:             ha_25a;
        -ms-animation-name:             ha_25a;
         -o-animation-name:             ha_25a;
}

#ha_26
{
    width: 9px;
    height: 175px;
    margin-right: 6px;
    -webkit-animation-name:             ha_26a;
       -moz-animation-name:             ha_26a;
        -ms-animation-name:             ha_26a;
         -o-animation-name:             ha_26a;
}

#ha_27
{
    height: 175px;
    margin-right: 9px;
    -webkit-animation-name:             ha_27a;
       -moz-animation-name:             ha_27a;
        -ms-animation-name:             ha_27a;
         -o-animation-name:             ha_27a;
}

#ha_28
{
    height: 175px;
    margin-right: 6px;
    -webkit-animation-name:             ha_28a;
       -moz-animation-name:             ha_28a;
        -ms-animation-name:             ha_28a;
         -o-animation-name:             ha_28a;
}

#ha_29
{
    -webkit-animation-name:             ha_29a;
       -moz-animation-name:             ha_29a;
        -ms-animation-name:             ha_29a;
         -o-animation-name:             ha_29a;
}

#ha_30
{
    -webkit-animation-name:             ha_30a;
       -moz-animation-name:             ha_30a;
        -ms-animation-name:             ha_30a;
         -o-animation-name:             ha_30a;
}

#ha_47
{
    color: #fff;
    bottom: -20px;
    right: 18px;
    font-size: 30px;
    position: absolute;
    font-family: 'Monda';
    -webkit-animation-name:             pulsing; 
    -webkit-animation-duration:         1s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  ease-out;
       -moz-animation-name:             pulsing; 
       -moz-animation-duration:         1s; 
       -moz-animation-iteration-count:  infinite;
       -moz-animation-timing-function:  ease-out;
        -ms-animation-name:             pulsing; 
        -ms-animation-duration:         1s; 
        -ms-animation-iteration-count:  infinite;
        -ms-animation-timing-function:  ease-out;
         -o-animation-name:             pulsing; 
         -o-animation-duration:         1s; 
         -o-animation-iteration-count:  infinite;
         -o-animation-timing-function:  ease-out;
}

/*********************************************** 
***************** Animations *******************
***********************************************/

@-webkit-keyframes ha_1a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  33% {
    opacity: 1;
    height: 195px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_1a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  33% {
    opacity: 1;
    height: 195px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_1a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  33% {
    opacity: 1;
    height: 195px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_1a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  33% {
    opacity: 1;
    height: 195px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_2a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  33% {
    opacity: 1;
    height: 195px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_2a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  33% {
    opacity: 1;
    height: 195px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_2a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  33% {
    opacity: 1;
    height: 195px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_2a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  33% {
    opacity: 1;
    height: 195px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_3a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  20% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_3a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  20% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_3a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  20% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_3a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  20% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_4a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  43% {
    opacity: 1;
    height: 175px;
  }
  55% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_4a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  43% {
    opacity: 1;
    height: 175px;
  }
  55% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_4a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  43% {
    opacity: 1;
    height: 175px;
  }
  55% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_4a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  43% {
    opacity: 1;
    height: 175px;
  }
  55% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_5a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  53% {
    opacity: 1;
    height: 175px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_5a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  53% {
    opacity: 1;
    height: 175px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_5a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  53% {
    opacity: 1;
    height: 175px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_5a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  53% {
    opacity: 1;
    height: 175px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_6a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  48% {
    opacity: 1;
    height: 175px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_6a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  48% {
    opacity: 1;
    height: 175px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_6a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  48% {
    opacity: 1;
    height: 175px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_6a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  48% {
    opacity: 1;
    height: 175px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_7a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  33% {
    opacity: 1;
    height: 175px;
  }
  55% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_7a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  33% {
    opacity: 1;
    height: 175px;
  }
  55% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_7a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  33% {
    opacity: 1;
    height: 175px;
  }
  55% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_7a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  33% {
    opacity: 1;
    height: 175px;
  }
  55% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_8a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  20% {
    opacity: 1;
    height: 175px;
  }
  55% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_8a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  20% {
    opacity: 1;
    height: 175px;
  }
  55% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_8a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  20% {
    opacity: 1;
    height: 175px;
  }
  55% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_8a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  20% {
    opacity: 1;
    height: 175px;
  }
  55% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_9a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  25% {
    opacity: 1;
    height: 175px;
  }
  55% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_9a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  25% {
    opacity: 1;
    height: 175px;
  }
  55% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_9a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  25% {
    opacity: 1;
    height: 175px;
  }
  55% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_9a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  25% {
    opacity: 1;
    height: 175px;
  }
  55% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_10a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  22% {
    opacity: 1;
    height: 175px;
  }
  55% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_10a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  22% {
    opacity: 1;
    height: 175px;
  }
  55% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_10a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  22% {
    opacity: 1;
    height: 175px;
  }
  55% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_10a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  22% {
    opacity: 1;
    height: 175px;
  }
  55% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_11a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  18% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_11a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  18% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_11a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  18% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_11a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  18% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_12a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  20% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_12a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  20% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_12a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  20% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_12a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  20% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_13a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  33% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_13a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  33% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_13a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  33% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_13a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  33% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_14a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  38% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_14a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  38% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_14a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  38% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_14a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  38% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_15a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  33% {
    opacity: 1;
    height: 195px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_15a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  33% {
    opacity: 1;
    height: 195px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_15a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  33% {
    opacity: 1;
    height: 195px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_15a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  33% {
    opacity: 1;
    height: 195px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_16a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  37% {
    opacity: 1;
    height: 195px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_16a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  37% {
    opacity: 1;
    height: 195px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_16a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  37% {
    opacity: 1;
    height: 195px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_16a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  37% {
    opacity: 1;
    height: 195px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_17a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  53% {
    opacity: 1;
    height: 175px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_17a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  53% {
    opacity: 1;
    height: 175px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_17a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  53% {
    opacity: 1;
    height: 175px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_17a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  53% {
    opacity: 1;
    height: 175px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


@-webkit-keyframes ha_18a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  21% {
    opacity: 1;
    height: 175px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_18a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  21% {
    opacity: 1;
    height: 175px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_18a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  21% {
    opacity: 1;
    height: 175px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_18a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  21% {
    opacity: 1;
    height: 175px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_19a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  30% {
    opacity: 1;
    height: 175px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_19a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  30% {
    opacity: 1;
    height: 175px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_19a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  30% {
    opacity: 1;
    height: 175px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_19a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  30% {
    opacity: 1;
    height: 175px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_20a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  18% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_20a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  18% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_20a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  18% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_20a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  18% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_21a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  35% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_21a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  35% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_21a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  35% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_21a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  35% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_22a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  41% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_22a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  41% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_22a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  41% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_22a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  41% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_23a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  28% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_23a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  28% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_23a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  28% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_23a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  28% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_24a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  24% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_24a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  24% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_24a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  24% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_24a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  24% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_25a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  21% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_25a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  21% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_25a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  21% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_25a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  21% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_26a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  23% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_26a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  23% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_26a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  23% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_26a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  23% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_27a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  43% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_27a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  43% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_27a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  43% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_27a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  43% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_28a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  26% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_28a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  26% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_28a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  26% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_28a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  26% {
    opacity: 1;
    height: 175px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_29a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  52% {
    opacity: 1;
    height: 195px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_29a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  52% {
    opacity: 1;
    height: 195px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_29a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  52% {
    opacity: 1;
    height: 195px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_29a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  52% {
    opacity: 1;
    height: 195px;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ha_30a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  18% {
    opacity: 1;
    height: 195px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes ha_30a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  18% {
    opacity: 1;
    height: 195px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes ha_30a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  18% {
    opacity: 1;
    height: 195px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes ha_30a
{
  0% {
    opacity: 1;
    height: 0px;
  }
  18% {
    opacity: 1;
    height: 195px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes pulsing
{
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes pulsing
{
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes pulsing
{
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes pulsing
{
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
              
            
!

JS

              
                // Hitman Absolution loading animation
// Modern browsers only!
              
            
!
999px

Console