CodePen Embed - Boredom

<div id="container">
      <div id="black_bar" class="hidden">
        <div class="black_bar hidden">• SERIOUSLY •</div>
      </div>

      <div id="ribbon" class="hidden">
        <div class="ribbon">
          <strong class="ribbon-content">
            <h1>
              <span class="spacer">&nbsp;</span>
              <span class="hidden">B</span>
              <span class="hidden">O</span>
              <span class="hidden">R</span>
              <span class="hidden">E</span>
              <span class="hidden">D</span>
            </h1>
          </strong>
        </div>  
      </div>  

      <div id="star" class="hidden">
        <div class="layer"><div class="star_text">I AM SO</div></div>
        <div class="layer"><div class="star outer rotate"></div></div>
        <div class="layer"><div class="star inner rotate"></div></div>
      </div>  
      
      <div id="flag" class="hidden">
        <div class="layer"><div id="flag_end"></div></div>
        <div class="layer"><div class="flag under"></div></div>
        <div class="layer"><div class="flag_over"></div></div>
        <div class="layer"><div class="flag_text_top">LIKE,</div></div>
        <div class="layer"><div class="flag_text_bottom">KILL ME</div></div>
      </div>

    </div>

.rotate {
  -webkit-animation-name: rotate; 
    -webkit-animation-duration: 10s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to { 
        -webkit-transform: rotate(360deg);
    }
}

.slideExpandUp{
  animation-name: slideExpandUp;
  -webkit-animation-name: slideExpandUp;  

  animation-duration: 1s; 
  -webkit-animation-duration: 1s;

  animation-timing-function: ease-out;  
  -webkit-animation-timing-function: ease -out;

  visibility: visible !important; 
}

@keyframes slideExpandUp {
  0% {
    transform: translateY(100%) scaleX(0);
  }
  50%{
    transform: translateY(0%) scaleX(1.1);
  }
  60%{
    transform: translateY(0%) scaleX(0.9);    
  }
  70% {
    transform: translateY(0%) scaleX(1.05);
  }     
  80%{
    transform: translateY(0%) scaleX(0.95);   
  }
  90% {
    transform: translateY(0%) scaleX(1.02);
  } 
  100%{
    transform: translateY(0%) scaleX(1);    
  }
}

@-webkit-keyframes slideExpandUp {
  0% {
    -webkit-transform: translateY(100%) scaleX(0);
  }
  50%{
    -webkit-transform: translateY(0%) scaleX(1.1);
  }
  60%{
    -webkit-transform: translateY(0%) scaleX(0.9);    
  }
  70% {
    -webkit-transform: translateY(0%) scaleX(1.05);
  }     
  80%{
    -webkit-transform: translateY(0%) scaleX(0.95);   
  }
  90% {
    -webkit-transform: translateY(0%) scaleX(1.02);
  } 
  100%{
    -webkit-transform: translateY(0%) scaleX(1);    
  }
}

.fadeIn{
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn; 

  animation-duration: 1.5s; 
  -webkit-animation-duration: 1.5s;

  animation-timing-function: ease-in-out; 
  -webkit-animation-timing-function: ease-in-out;   

  visibility: visible !important; 
}

@keyframes fadeIn {
  0% {
    transform: scale(0);
    opacity: 0.0;   
  }
  60% {
    transform: scale(1.1);  
  }
  80% {
    transform: scale(0.9);
    opacity: 1; 
  } 
  100% {
    transform: scale(1);
    opacity: 1; 
  }   
}

@-webkit-keyframes fadeIn {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.0;   
  }
  60% {
    -webkit-transform: scale(1.1);
  }
  80% {
    -webkit-transform: scale(0.9);
    opacity: 1; 
  } 
  100% {
    -webkit-transform: scale(1);
    opacity: 1; 
  }   
}

.textShadow {
  animation-name: textShadow;
  -webkit-animation-name: textShadow; 

  animation-duration: 0.8s; 
  -webkit-animation-duration: 0.8s;

  text-shadow: 4px 4px 0px rgba(150, 150, 150, 0.58);
}

@keyframes textShadow {
  0% {
      text-shadow: 0px 0px 0px rgba(150, 150, 150, 0.0);
     }
  50% {
    text-shadow: 2px 2px 0px rgba(150, 150, 150, 0.25);
  }
  100% {
    text-shadow: 4px 4px 0px rgba(150, 150, 150, 0.58);
  }             
}

@-webkit-keyframes textShadow {
  0% {
      text-shadow: 0px 0px 0px rgba(150, 150, 150, 0.0);
     }
  50% {
    text-shadow: 2px 2px 0px rgba(150, 150, 150, 0.25);
  }
  100% {
    text-shadow: 4px 4px 0px rgba(150, 150, 150, 0.58);
  }       
}

.moveOut {
  animation-name: moveOut;
  -webkit-animation-name: moveOut;  

  animation-duration: 0.8s; 
  -webkit-animation-duration: 0.8s;

  animation-timing-function: ease-out;  
  -webkit-animation-timing-function: ease-out;  
}

@keyframes moveOut {
  0% {
    top: 0;
  }
  99% {
    top: 400px;
  }
  100% {
    visibility: hidden;
  }             
}

@-webkit-keyframes moveOut {
  0% {
    top: 0;
  }
  99% {
    top: 400px;
  }
  100% {
    visibility: hidden;
  }     
}

.pullDown{
  animation-name: pullDown;
  -webkit-animation-name: pullDown; 

  animation-duration: 1.1s; 
  -webkit-animation-duration: 1.1s;

  animation-timing-function: ease-out;  
  -webkit-animation-timing-function: ease-out;  

  transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;     
}

@keyframes pullDown {
  0% {
    transform: scaleY(0.1);
  }
  40% {
    transform: scaleY(1.02);
  }
  60% {
    transform: scaleY(0.98);
  }
  80% {
    transform: scaleY(1.01);
  }
  100% {
    transform: scaleY(0.98);
  }       
  80% {
    transform: scaleY(1.01);
  }
  100% {
    transform: scaleY(1);
  }             
}

@-webkit-keyframes pullDown {
  0% {
    -webkit-transform: scaleY(0.1);
  }
  40% {
    -webkit-transform: scaleY(1.02);
  }
  60% {
    -webkit-transform: scaleY(0.98);
  }
  80% {
    -webkit-transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(0.98);
  }       
  80% {
    -webkit-transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(1);
  }   
}

.stretchRight{
  animation-name: stretchRight;
  -webkit-animation-name: stretchRight; 

  animation-duration: 0.2s; 
  -webkit-animation-duration: 0.2s;

  animation-timing-function: ease-out;  
  -webkit-animation-timing-function: ease-out;  

  transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;    
}

@keyframes stretchRight {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }             
}

@-webkit-keyframes stretchRight {
  0% {
    -webkit-transform: scaleX(0);
  }
  100% {
    -webkit-transform: scaleX(1);
  }   
}

.hidden {
  display: none;
}


/* ------------------------------------------------------------  */

$bar-bg: #000;
$bar-text: #FFF;

$star-size: 200px;
$star-border: 10px;
$star-text: #ffff99;
$star-bg: #3985a9;
$star-border-bg: #80cfe3;

$ribbon-width: 350px;

$flag-height: 450px;
$flag-width: 110px;


body {
  margin: 0;
  padding: 0;
}

#container {
  position: relative;
  width: 100%;
  padding-top: 50px;
  font-family: 'Helvetica Neue',Helvetica, sans-serif;
}

.layer {
  position: absolute;
}

/* -------------------------------------   BLACK BAR */
#black_bar {
  position: absolute;
  z-index: 200;
  width: 100%;
  margin-top: 310px;
  height: 50px;
  background: $bar-bg;
}

.black_bar {
  position: relative;
  width: 100%;  
  text-align: center;
  color: $bar-text;
  font-weight: bold;
  font-size: 40px;
}

/* -------------------------------------   STAR */


#star {
  position: absolute;
  z-index: 5;
  left: 50%;
  margin-left: -($star-size+($star-border*2))/2;
  // transform: translate(-50%, -50%);
  width: $star-size+($star-border*2);
  color: $star-text;
}

.star {   
  width: $star-size;
    height: $star-size; 
    border-radius: 20px;

    position: relative;
    text-align: center;

    &:before,
    &:after {
      @extend .star;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
    }

    &:before {
      -webkit-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
    }

    &:after {
      -webkit-transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
    }
}

.star.outer {
  background: $star-border-bg;
  padding: $star-border;
}

.star.inner {
  background: $star-bg;
  margin-top: $star-border;
  margin-left: $star-border;

  &:before,
  &:after {
    top: -$star-border;
    left: -$star-border;
  }
}

.star_text {
  position: absolute;
  width: $star-size;
  margin-left: $star-border;
  z-index: 10;
  text-align: center;
  margin-top: 50px;
  font-size: 40px;
}

/* -------------------------------------   RIBBON */

#ribbon {
  position: absolute;
  width: $ribbon-width;
  z-index: 100;
  margin-top: 100px;
  left: 50%;
  margin-left: -$ribbon-width/2;
  color: $star-text;
}

.ribbon {
   width: $ribbon-width;
   position: absolute;
   text-align: center;
   font-size: 20px!important;
   background: $star-border-bg;

   h1 {
     font-size: 50px!important;
     margin:0px;
     padding: 6px 10px;
   }

   &:before,
   &:after {
    content: '';
    position: absolute;
    display: block;
    bottom: -1em;
    border: 1.5em solid $star-border-bg;
    z-index: -1;
    }

  &:before {
     left: -2em;
     border-right-width: 1.5em;
     border-left-color: transparent;
    }

    &:after {
     right: -2em;
     border-left-width: 1.5em;
     border-right-color: transparent;
  }

  .ribbon-content {
    &:before,
    &:after {
       border-color: darken($star-border-bg, 30%) transparent transparent transparent;
       position: absolute;
       display: block;
       border-style: solid;
       bottom: -1em;
       content: '';
     }

     &:before {
       left: 0;
       border-width: 1em 0 0 1em;
     }

     &:after {
       right: 0;
       border-width: 1em 1em 0 0;
     }
  }
}

/* -------------------------------------   FLAG */

$flag-bg: #fd8a4b;
$flag-bg-light: #febf3d;

#flag {
  position: absolute;
  margin-top: 10px;
  width: $flag-width;
  left: 50%;
  margin-left: -$flag-width/2;
}

.flag {
  background: $flag-bg;
  width: $flag-width;
  height: $flag-height;
  padding-top: 15px;
  position: relative;   
  color: white;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  border-bottom: 25px solid #ffff99;

  &:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-bottom: 40px solid #ffff99;
    border-left: 55px solid transparent;
    border-right: 55px solid transparent;
  }
  
  &.under {
    background: $flag-bg-light;

    &:before {
      content: "";
      position: absolute;
      z-index: 10;
      top: $flag-height;
      left: 0;
      bottom: 0;
      width: 0;
      height: 0;
      border-bottom: 40px solid #FFF;
      border-left: 55px solid transparent;
      border-right: 55px solid transparent;
    }
  }
}

#flag_end {
  position: absolute;
  z-index: 150;
  background: $flag-bg;
  width: $flag-width;
  height: 95px;
  margin-top: ($flag-height)-52;
  
  &:before {
      content: "";
      position: absolute;
      background: $flag-bg;
      margin-top: -20px;
      height: 40px;
      width: $flag-width;
      -moz-transform:skewY(-10deg);
      -webkit-transform:skewY(-10deg);
      -o-transform:skewY(-10deg);
      -ms-transform:skewY(-10deg);
      transform:skewY(-10deg);
    }

  &:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-bottom: 40px solid #fff;
    border-left: 55px solid transparent;
    border-right: 55px solid transparent;
  }

  &.border-top {
    &:before {
      border-top: 1px solid #000;
    }
  }
}

.flag_over {
  background: $flag-bg;
  width: $flag-width;
  height: ($flag-height)-70;
  -moz-transform:skewY(-10deg);
  -webkit-transform:skewY(-10deg);
  -o-transform:skewY(-10deg);
  -ms-transform:skewY(-10deg);
  transform:skewY(-10deg);
}

.flag_text_top {
  text-align: center;
  width: $flag-width;
  margin-top: 250px;
  color: #FFF;
  font-size: 30px;
  font-weight: bold;
}

.flag_text_bottom {
  text-align: center;
  width: $flag-width;
  margin-top: 390px;
  font-size: 22px;
  color: #000;
}

View Compiled

setTimeout("$('#star').removeClass('hidden').addClass('fadeIn');",  100);
setTimeout("$('#ribbon').removeClass('hidden').addClass('slideExpandUp');",  700);
setTimeout("$('.ribbon-content .spacer').addClass('hidden');",  1500);
setTimeout("$('.ribbon-content span').slice(1, 2).removeClass('hidden').addClass('fadeIn');",  1500);
setTimeout("$('.ribbon-content span').slice(2, 3).removeClass('hidden').addClass('fadeIn');",  1600);
setTimeout("$('.ribbon-content span').slice(3, 4).removeClass('hidden').addClass('fadeIn');",  1700);
setTimeout("$('.ribbon-content span').slice(4, 5).removeClass('hidden').addClass('fadeIn');",  1800);
setTimeout("$('.ribbon-content span').slice(5, 6).removeClass('hidden').addClass('fadeIn');",  1900);

setTimeout("$('.ribbon-content').addClass('textShadow');",  3000);

setTimeout("$('#flag').removeClass('hidden').addClass('pullDown');",  3600);
setTimeout("$('#black_bar').removeClass('hidden').addClass('stretchRight');",  4700);
setTimeout("$('.black_bar').removeClass('hidden').addClass('fadeIn');",  4900);
setTimeout("$('#flag_end').addClass('border-top');",  6900);    setTimeout("$('#flag_end').removeClass('border-top').addClass('moveOut').delay(300).fadeOut(300);",  7100);

This Pen is owned by Schmuh on CodePen.

See more by @Schmuh on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js