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