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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                .container
	.wraper
		.bg-one.first
			.triangles
				.triangle
				.triangle
				.triangle
				.triangle
		.o-yeah
			.box
				.o 
					p O
				.yeah yeah
		.tri-hear
			.box
				.lines.hor
				.lines.ver
				.yellow-triangle
				.heart
		.ver-1
			.box
				p In
				p France
				p a 
				p skinny
				p Man
				p died
				p of
				p a
				p big
				p Disease
				p with
				p a
				p little
				p Name
				p By
				p chance
				p his
				p Girl
				p Friend
				p came
				p across
				p a
				p Needle
				p and
				p soon
				p She
				p did
				p the
				p Same
		.ver-2
			.box
				.line-box
				.words
					p At 
					p Home
					p there
					p are
					p seven
					p teen
					p year
					p old
					p Boys
					p And
					p their
					p Idea
					p of
					p Fun
					p is 
					p being
					p in
					p a
					p Gang
					p called
					p The Disciples
					p High
					p on
					p Crack
					p and
					p totin'
					p a
					p machine
					p Gun 
		.bridge.first
			.bridge-bg
			.time-box
				p Time
				p time
		.bg-three
			.green-bar
		.ver-3
			.box
				.cross
			.words.part-1
				p Hur
				p ri
				p cane
				p Annie
				p ripped
				p the
				p Ceil
				p ing
				p of
				p a
				p Church
				p and
				p killed
				p Every
				p one
				p in
				p side 
				p U
				p turn
				p on
				p the
				p telly
				p and
				p every
				p other
				p story
				p is
				p tellin'
				p U
				p some
				p body
				p died 
			.words.part-2
				p Sister 
				p killed her
				p Baby cuz
				p She couldn't
				p afford
				p 2 feed it
				p and We're
				p sending
				p People 
				p 2 the
				p Moon 
		.bg-four
			.box
				.triangles
					.triangle
					.triangle
		.ver-4
			.words
				p In September
				p my Cousin
				p tried Reefer
				p 4 the very
				p first time
				p Now He's
				p doing Horse
				p it's June
		.bg-five
			.time-box
			.triangles
				.triangle
				.triangle
			.chor
				.words
					p It's silly, no? when a Rocket Ship explodes and everybody still wants 2 fly
					p Some say a Man ain't happy unless a Man truly dies
					p Oh why?
		.bridge.second
			.bridge-bg
			.time-box
				p Time
				p time
		.bg-six
			.triangles
				.triangle
				.triangle
				.triangle
				.triangle
		.ver-5
			.box
				.star-pulse
				.words
					p Baby make a Speech
					p Star Wars fly.
					p Neighbors just
					p shine It on
					p But if a night falls
					p and a Bomb falls
					p will anybody see the 
					p Dawn? 
		.bridge-alt
			.bridge-bg
			.time-box
				p Time
				p time
		.bg-one.second
			.triangles
				.triangle
				.triangle
				.triangle
				.triangle
		.chor2
			.box
				.words
					p Is it silly,
					p no?
					p when a Rocket
					p blows up
					p and Everybody
					p still wants to
					p fly
					p Some say Man
					p ain't happy truly
					p til a man
					p truly dies.
					p O why?
					p O why?
		.img-box
			.img-holder
		.bridge.third
			.bridge-bg
			.time-box
				p Time
				p time
				p Time
				p time
		.bg-seven
			.triangles
				.triangle
				.triangle
				.triangle
				.triangle
		.ver-6
			.box
				.heart
				.words.p1
					p Sign O the Times
					p mess with your mind
					p hurry before it's 2 late
					p Let's fall in love,
					p get married, have a Baby
				.words.nate 
					p Nate
				.words.p2
					p If
					p it's
					p a
					p Boy 
		.bg-one.third
			.triangles
				.triangle
				.triangle
				.triangle
				.triangle
		.outro
			.box
				.lines.hor
				.lines.ver
			p Time
			.img-box
				.img-holder
		.credits
			p 
				a(href="https://www.youtube.com/watch?v=MfASW6ibR-8") "Sign 'o' Times" 
				| song by Prince
			p Original video writen and directed by 
				a(href="http://konersman.com/") Bill Konersman
			p Converted to HTML/CSS by 
				a(href="https://twitter.com/gollactive") Goran Rakić 
			p Thanks for sticking till the end :-)

              
            
!

CSS

              
                //sizing
$unit: 1vmin;
$w: 80*$unit;
$h: $w*.75;
//colors
$bg-darker: #0b0b0b;
$bg-lighter: #404040;
$blue: #0f7ae2;
$pink: #c60a61;
$orange: #db650b;
$purple: #791ea1;
$indigo: #7448d1;
$indigo2: #0c0e59;
$whitey: #ceced0;
$whitey2: #a1a1a3;
$teal: #1b686e;
$yellow: #cfac68;
$red-yeah: #824f4e;
$h-line: rgba(50, 27, 56, .7);
$v-line: rgba(36, 29, 37, .7);
$line-box-1: #2a282b;
$line-box-2: #d8b396;
//easing-func
$cubic-out: cubic-bezier(0, 0, 0.2, 1);
//segment delays
$sdel-1: 11.5s;
$sdel-2: 37.1s;
$sdel-3: 56.9s;
$sdel-4: 66.6s;
$sdel-5: 81.7s;
$sdel-6: 105.4s;
$sdel-7: 125.1s;
$sdel-8: 134.8s;
$sdel-9: 144s;
$sdel-10: 154s;
$sdel-11: 168.8s;
$sdel-12: 173.8s;
$sdel-13: 193.1s;
$sdel-14: 205.1s;
$sdel-15: 220s;
//centered-box
.cbox{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
//bg-one triangles
@mixin bg-one-trg($subclass, $del){
	&#{$subclass}{
		animation-delay: $del;
		.triangles{
			animation-delay: $del + .75s;
		}
		.triangle{
			$ad: .5s;
			&:nth-child(1){
				animation-delay: $del + $ad*2;
			}
			&:nth-child(2){
				animation-delay: $del + $ad*3;
			}
			&:nth-child(3){
				animation-delay: $del;
			}
			&:nth-child(4){
				animation-delay: $del + $ad;
			}
		}
	}
}
body{
	background-color: #222;
	font-family: 'Lusitana', serif;
}
*, *:after, *:before{
	box-sizing: border-box;
}
.container{
	@extend .cbox;
}
.wraper{
	@extend .cbox;
	width: $w;
	height: $h;
	background-color: $bg-darker;
}
.triangle{
	position: absolute;
	width: 0;
	height: 0;
	color: $bg-darker;
	border: $w*.05 solid transparent;							
}
.heart {
	@extend .cbox;
	width: $w;
	height: $w;
	&:before, &:after {
		position: absolute;
		content: "";
		left: 50%;
		top: 0;
		width: 50%;
		height: 80%;
		background-color: $pink;
		border-radius: $w $w 0 0;
		transform: rotate(-45deg);
		transform-origin: 0 100%;
	}
	&:after {
		left: 0;
		transform: rotate(45deg);
		transform-origin :100% 100%;
	}
}
.bg-one{
	@extend .cbox;
	width: 100%;
	height: 100%;
	opacity: 0;
	background: $bg-darker;
	animation: show-box 0s steps(1) forwards;
	@include bg-one-trg(".first", 0s);
	@include bg-one-trg(".second", $sdel-10);
	@include bg-one-trg(".third", $sdel-14);
	.triangles{
		@extend .cbox;
		width: 90%;
		height: 90%;
		background: $bg-lighter;
		animation: tr-splash 2s linear 30;
	}
	.triangle{
		animation: tr1 2s linear 30;
		$ad: .5s;
		&:nth-child(1){
			left: 50%;
			border-top: $w*.1 solid;
			transform: translateX(-50%);
		}
		&:nth-child(2){
			top: 50%;
			right: 0;
			border-right: $w*.1 solid;
			transform: translateY(-50%);
		}
		&:nth-child(3){
			left: 50%;
			bottom: 0;
			border-bottom: $w*.1 solid;
			transform: translateX(-50%);
		}
		&:nth-child(4){
			top: 50%;
			border-left: $w*.1 solid;
			transform: translateY(-50%);
		}
	}
}
.box{
		@extend .cbox;
		width: $w*.7;
		height: $h*.65;
		background: $bg-darker;
}
.o-yeah{
	.box{
		div{
			@extend .cbox;
		}
		.o{
			color: $bg-lighter;
			font-size: $h*.8;
			animation: o-in 8.5s $cubic-out forwards;
			p{
				animation: oy-out .8s linear 10.8s forwards;
			}
		}
		.yeah{
			color: $red-yeah;
			opacity: 0;
			font-size: $h*.5;
			animation: p-zoom-out 1s $cubic-out 8.5s forwards;
		}
	}
}
.tri-hear{
	animation: show-box 0s steps(1) $sdel-1 forwards;
	opacity: 0;
	.box{
		overflow: hidden;
		.lines{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			box-shadow: 0px 0px 2px 2px transparentize($purple, .7);
			&.hor{
				animation: lines-1 5s linear $sdel-1 forwards;
			}
			&.ver{
				animation: lines-2 5s linear $sdel-1 forwards;
			}
		}
		.yellow-triangle{
			@extend .cbox;
			animation: ytr 5s $cubic-out ($sdel-1 + 6s) forwards;
			opacity: 0;
			transform: translateX(-33%) translateY(-56%) rotate(-24deg) scale(1.4);
			border-style: solid;
			border-width: .65*$w 0 .375*$w 1.1*$w;
			border-color: transparent transparent transparent $yellow;
		}
		.heart{
			animation: heart-out 5s $cubic-out ($sdel-1 + 11s);
			opacity: 0;
			transform: translateX(-35%) translateY(-40%) rotate(-40deg) scale(1.2);
		}
	}
}
.ver-1{
	$v1-del: 27.7s;
	@extend .cbox;
	opacity: 0;
	animation: show-box 0s steps(1) $v1-del forwards;
	.box{
		background-color: $whitey;
		overflow: hidden;
		p{
			@extend .cbox;
			font-size: $h*.3;
			opacity: 0;
			color: $bg-darker;
			animation: p-zoom-out 350ms linear forwards;
			@for $i from 0 to 29{
				$ii: $i+1;
				$dl: if($i<14, $v1-del, $v1-del + 330ms);
				&:nth-child(#{$ii}){
					animation-delay: $dl + 300ms*$i;
				}
			}
		}
	}
}
.ver-2{
	@extend .cbox;
	opacity: 0;
	animation: show-box 0s steps(1) $sdel-2 forwards;
	.box{
		$del: 0s;
		background-color: #ceced0;
		overflow: hidden;
		.line-box{
			@extend .cbox;
			width: 0;
			height: 0;
			animation: lines 9s linear ($sdel-2 + 10.6s) both;
			z-index: 1000;
			&:after{
				content: "";
				@extend .cbox;
				width: 100%;
				height: 100%;
				background-color: $line-box-1;
				animation: line-box-flash 3s 3 linear ($sdel-2 + 10.6s) both;
			}
		}
		&:before, &:after{
			content: "";
			@extend .cbox;
			box-shadow: 0px 0px 2px 2px transparentize($purple, .7);
			z-index: -10;
			animation: lines 9.1s linear ($sdel-2 + 10.6s) both;
		}
		&:before{
			width: 100%;
			height: 0;
		}
		&:after{
			width: 0%;
			height: 100%;
		}
		p{
			@extend .cbox;
			font-size: $h*.2;
			color: $bg-darker;
			opacity: 0;
			text-align: center;
			animation: p-flash linear;
			$dls: 5,13,4,3,3,2,8,15,9,11,4,15,10,26,3,10,1,3,11,11,20,4,14,15,6,7,6,12,12;
			$td: 0ms;
			@for $i from 0 to 29{
				$ii: $i+1;
				$dl: if($i<14, 0, .710);
				&:nth-child(#{$ii}){
					$dur: 40ms * nth($dls, $ii);
					animation-delay: $sdel-2 + $del + $td;
					animation-duration: $dur;
					$td: $td + $dur;
				}
			}
		}
	}
}
.bridge{
	@extend .cbox;
	opacity: 0;
	width: $w;
	height: $h;
	animation: show-box 0s steps(1) forwards;
	&.first{
		animation-delay: $sdel-3;
		.time-box{
			p{
				&:first-child, &:last-child{
					animation-delay: $sdel-3;
				}
			}
		}
		.bridge-bg{
			animation-delay: $sdel-3;
		}
	}
	&.second{
		animation-delay: $sdel-7;	
		.time-box{
			p{
				&:first-child, &:last-child{
					animation-delay: $sdel-7;
				}
			}
		}
		.bridge-bg{
			animation-delay: $sdel-7;
		}
	}
	&.third{
		animation-delay: $sdel-12;	
		.time-box{
			p{
				&:nth-child(odd), &:nth-child(even){
					animation-delay: $sdel-12;
				}
				&:nth-child(3){
					left: $w*2.2;
					animation-delay: $sdel-12;
					animation-duration: 22s;
				}
				&:nth-child(4){
					left: $w*1.6;
					animation-delay: $sdel-12;
					animation-duration: 22s;
				}
			}
		}
		.bridge-bg{
			animation-delay: $sdel-12;
			animation-iteration-count: 16;
		}
	}
	.bridge-bg{
		@extend .cbox;
		width: $w;
		height: $h;
		background-color: $bg-darker;
		animation: pulse-two 1.2s 8;	
	}
	.time-box{
		@extend .cbox;
		width: 100%;
		height: 70%;
		overflow: hidden;
		background-color: $bg-lighter;
		color: $bg-darker;
		font-size: $h*.5;
		text-shadow: 1px -1px 0px transparentize($pink, 0.8);
		p{
			@extend .cbox;
			&:nth-child(odd){
				left: $w*.7;
				top: $h*.25;
				transform: scale(1.65);
				animation: big-time 11s linear forwards;
				z-index: 10;
			}
			&:nth-child(even){
				left: $w*.55;
				top: 0;
				transform: scale(.6);
				animation: small-time 11s linear forwards;
			}
		}
	}
}
.bg-three{
	animation: show-box 0s steps(1) $sdel-4 forwards;
	opacity: 0;
	@extend .cbox;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: $bg-lighter;
	.green-bar{
		@extend .cbox;
		left: 15%;
		top: 20%;
		animation: green-bar-r 2s 8 linear $sdel-4;
		&:after{
			content: "";
			position: absolute;
			height: $h*.2;
			bottom: 0;
			left: 0;
			background: #00f;
			box-shadow: 4px 0 8px 6px #2e953a;
			transform-origin: bottom;
			animation: green-bar-a 2s 8 steps(4) $sdel-4;
		}
	}
}
.ver-3{
	animation: show-box 0s steps(1) $sdel-4 forwards;
	opacity: 0;
	.box{
		background-color: $pink;
		&:before, &:after{
			content: "";
			position: absolute;
			width: 50%;
			height: 50%;
			background-color: $orange;
		}
		&:after{
			bottom: 0;
			right: 0;
			animation: switch-bg-after 0s steps(1) ($sdel-4 + 9.6) forwards;
		}
		&:before{
			animation: switch-bg-before 0s steps(2) ($sdel-4 + 9.6) forwards;
		}
	}
	.cross{
		@extend .cbox;
		width: 12%;
		height: 15%;
		z-index: 100;
		color: #f5c4a4;
		animation: switch-bg-before 0s steps(2) ($sdel-4 + 9.6) forwards;
		&:before, &:after{
			content: "";
			@extend .cbox;
			border: thin solid;
		}
		&:after{
			height: 100%;
		}
		&:before{
			width: 100%;
		}
	}
	.words{
		@extend .cbox;
		width: $w*.7;
		height: $h*.65;
		color: $bg-darker;
		p{
				position: absolute;
				opacity: 0;
				font-size: $h*.14;
				line-height: $h*.3;
				text-align: center;
				animation: flash-p-3 linear;
		}
		&.part-1{
			p{
				width: 50%;
				height: 50%;
				&:nth-child(4n+2){
					left: 50%;
					top: 0%;
				}
				&:nth-child(4n+3){
					left: 50%;
					top: 50%;
				}
				&:nth-child(4n+4){
					left: 0%;
					top: 50%;
				}
				$dels: 6,7,8,7,7,3,3,4,1,3,12,1,12,5,7,9,26,5,5,7,1,1,1,10,7,13,8,4,9,4,6,10,5,10,2;
				$del: 0s;
				@for $i from 0 to 32{
					$ii: $i+1;
					&:nth-child(#{$ii}){
						animation-delay: $sdel-4 + $del;
						$dur: (nth($dels, $ii)+nth($dels, $ii+1)+nth($dels, $ii+2)+nth($dels, $ii+3))*40ms;
						animation-duration: $dur;
						$del: $del + 43ms * nth($dels, $ii);
					}
				}
			}	
		}
		&.part-2{
			p{
				width: 100%;
				height: 50%;
				&:nth-child(even){
					bottom: 0;
				}
				$dels: 20,28,22,20,26,25,26,19,22,15,15,15;
				$del: 0ms;
				@for $i from 0 to 11{
					$ii: $i+1;
					&:nth-child(#{$ii}){
						animation-delay: $sdel-4 + 9.6 + $del;
						$dur: (nth($dels, $ii)+nth($dels, $ii+1))*20ms;
						animation-duration: $dur;
						$del: $del + 20ms * nth($dels, $ii);
					}
				}
			}
		}
	}
}
.bg-four{
	@extend .cbox;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: $bg-lighter;
	opacity: 0;
	animation: show-box 0s steps(1) $sdel-5 forwards;
	.box{
		width: 100%;
		height: 100%;	
		background-color: $bg-lighter;
		animation: tr2-splash 1s linear 24 $sdel-5;
	}
	.triangles{
		@extend .cbox;
		width: 100%;
		height: 70%;
		background: $yellow;
		animation: tr2-end 4s ease-in-out ($sdel-5 + 6.5s) alternate 4;
		.triangle{
			border: $w*.2 solid transparent;
			animation: tr2 1s linear 24 $sdel-5;
			&:nth-child(1){
				left: 50%;
				top: -$w*.4;
				border-top: $w*.4 solid;
				transform: translateX(-50%);
			}
			&:nth-child(2){
				bottom: -$w*.4;
				left: 50%;
				border-bottom: $w*.4 solid;
				transform: translateX(-50%);
			}
		}
	}
}
.ver-4{
	opacity: 0;
	animation: show-box 0s steps(1) $sdel-5 forwards;
	.words{
		@extend .cbox;
		p{
			@extend .cbox;
			opacity: 0;
			font-size: $h*.2;
			line-height: $h*.3;
			text-align: center;
			white-space: nowrap;
			animation: flash-p-3 .5s linear;
			$dels: 10,17,12,20,34,7,28,20;
			$del: 0ms;
			@for $i from 0 to 8{
				$ii: $i+1;
				&:nth-child(#{$ii}){
					animation-delay: $sdel-5 + $del;
					animation-duration: nth($dels, $ii)*45ms;
					$del: $del + 45ms * nth($dels, $ii);
				}
			}
		}
	}
}
.bg-five{
	opacity: 0;
	animation: show-box 0s steps(1) $sdel-6 forwards;
	@extend .cbox;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: $bg-lighter;
	.triangles{
		@extend .cbox;
		width: 100%;
		height: 100%;
		z-index: 1;
		.triangle{
			border: $w*.1 solid transparent;
			animation: tr3 .5s linear 40 $sdel-6;
			&:nth-child(1){
				left: 0;
				top: 50%;
				border-left: $w*.2 solid;
				transform: translateY(-50%);
			}
			&:nth-child(2){
				top: 50%;
				right: 0%;
				border-right: $w*.2 solid;
				transform: translateY(-50%);
			}
		}
	}
	.time-box{
		@extend .cbox;
		width: $h*.6;
		height: $h*.6;
		background-color: $indigo;
		overflow: hidden;
		animation: time-flash 1s linear ($sdel-6 + 7.7s);
		&:before{
			content: "time";
			position: absolute;
			font-size: $h;
			top: -37%;
			left: 100%;
			animation: time-2 20s linear $sdel-6;
		}
	}
}
.chor{
	.words{
		@extend .cbox;
		width: 100%;
		height: 17%;
		background-color: $bg-lighter;
		p{
			position: absolute;
			top: 18%;
			left: 100%;
			color: #818183;
			font-size: $h*.11;
			animation: chor-run linear forwards;
			white-space: nowrap;
			&:first-child{
				left: 75%;
				animation-duration: 8s;
				animation-delay: $sdel-6;
			}
			&:nth-child(2){
				animation-duration: 19.2s;
				animation-delay: $sdel-6 + 6s;
			}
			&:last-child{
				animation-duration: 19.2s;
				animation-delay: $sdel-6 + 16s;
			}
		}
	}
}
.bg-six{
	@extend .cbox;
	width: 100%;
	height: 100%;
	background: $bg-darker;
	opacity: 0;
	animation: show-box 0s steps(1) $sdel-8 forwards;
	.triangles{
		@extend .cbox;
		width: 90%;
		height: 90%;
		background: $indigo2;
	}
	.triangle{
		animation: tr4 2s linear 5;
		$ad: .5s;
		&:nth-child(1){
			left: 50%;
			border-top: $w*.1 solid;
			transform: translateX(-50%);
			animation-delay: $sdel-8;
		}
		&:nth-child(2){
			top: 50%;
			right: 0;
			border-right: $w*.1 solid;
			transform: translateY(-50%);
			animation-delay: $sdel-8 + $ad;
		}
		&:nth-child(3){
			left: 50%;
			bottom: 0;
			border-bottom: $w*.1 solid;
			transform: translateX(-50%);
			animation-delay: $sdel-8 + $ad*2;
		}
		&:nth-child(4){
			top: 50%;
			border-left: $w*.1 solid;
			transform: translateY(-50%);
			animation-delay: $sdel-8 + $ad*3;
		}
	}
}
.ver-5{
	opacity: 0;
	animation: show-box 0s steps(1) $sdel-8 forwards;
	.box{
		overflow: hidden;
		.star-pulse{
			@extend .cbox;
			width: $w*.06;
			height: $h*.07;
			opacity: 1;
			animation: pulse-star 100ms steps(2) 80 $sdel-8 forwards;
			z-index: -10;
			&:before, &:after{
				content: "";
				@extend .cbox;
				box-shadow: 1px 1px 4px 2px transparentize($pink, .5);
			}
			&:before{
					width: 100%;				
			}
			&:after{
					height: 100%;				
			}
		}
		p{
			position: absolute;
			font-size: $h*.2;
			color: $whitey2;
			text-align: center;
			white-space: nowrap;
			animation: v5-run linear forwards;
			left: 110%;
			$delays: 0,.8,1.8,2.4,3.4,3.8,6.5,7.4;
			$durations: 1.3,1.5,1.2,1.3,1.8,1.8,2,2.4;
			$tops: 60,25,55,30,-20,60,25,15;
			$sizes: .2,.08,.18,.12,.08,.2,.12,.06;
			&:first-child{
				left: 65%;
			}
			&:nth-child(5){
				left: 18%;
				animation: v5-fall linear forwards;
			}
			@for $i from 0 to 8{
				$ii: $i+1;
				&:nth-child(#{$ii}){
					top: nth($tops,$ii)*1%;
					font-size: nth($sizes,$ii)*$h;
					animation-delay: $sdel-8 + nth($delays,$ii);
					animation-duration: nth($durations,$ii)*1.5s;
				}
			}
		}
	}
}
.bridge-alt{
	@extend .cbox;
	width: 100%;
	height: 100%;
	opacity: 0;
	animation: show-box 0s steps(1) forwards $sdel-9;
	.bridge-bg{
		@extend .cbox;
		width: $w;
		height: $h;
		background-color: $bg-darker;
		animation: pulse-two 1.2s 8 $sdel-9;	
	}
	.time-box{
		@extend .cbox;
		width: 80%;
		height: 100%;
		overflow: hidden;
		background-color: $bg-lighter;
		color: $bg-darker;
		font-size: $h*.5;
		text-shadow: 1px -1px 0px transparentize($pink, 0.8);
		p{
			@extend .cbox;
			&:first-child{
				transform: rotate(-30deg) translate(50%, -145%) scale(1.6);
				animation: big-time-alt 10s linear $sdel-9;
				z-index: 10;
			}
			&:last-child{
				transform: rotate(-30deg) translate(30%, -140%) scale(.6);
				animation: small-time-alt 10s linear $sdel-9;
			}
		}
	}
}
.chor2{
	opacity: 0;
	animation: show-box 0s steps(1) forwards $sdel-10;
	.box{
		$del: 0s;
		background-color: $whitey;
		overflow: hidden;
		&:before, &:after{
			content: "";
			@extend .cbox;
			border: thin solid;
			color: #9c90bd;
			z-index: -10;
		}
		&:before{
			width: 100%;
			height: 0;
		}
		&:after{
			width: 0%;
			height: 100%;
		}
		p{
			@extend .cbox;
			font-size: $h*.13;
			color: $bg-darker;
			opacity: 0;
			text-align: center;
			animation: p-flash linear;
			white-space: nowrap;
			$dls: 9,9,19,35,21,26,17,22,50,17,50,50,40;
			$td: 0ms;
			@for $i from 0 to 13{
				$ii: $i+1;
				$dl: if($i<14, 0, .710);
				&:nth-child(#{$ii}){
					$dur: 40ms * nth($dls, $ii);
					animation-delay: $sdel-10 + $del + $td;
					animation-duration: $dur;
					$td: $td + $dur;
				}
			}
		}
	}
}
.img-box{
	opacity: 0;
	animation: show-box 0s steps(1) forwards $sdel-11;
	@extend .cbox;
	width: $w*.7;
	height: $h*.65;
	background: $bg-darker;
	.img-holder{
		@extend .cbox;
		width: 25%;
		height: 25%;
		background-image: url('https://dl.dropboxusercontent.com/u/23293226/codepen-portfolio/sot.jpg');
		background-size: cover;
    background-position: center;
		animation: zoom-img 3.5s steps(2) $sdel-11 forwards;
	}
}
.bg-seven{
	opacity: 0;
	animation: show-box 0s steps(1) forwards $sdel-13;
	@extend .cbox;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: $bg-darker;
	.triangles{
		@extend .cbox;
		width: 90%;
		height: 90%;
		animation: bg-7-flash 1s steps(1) forwards 13 $sdel-13;
	}
	.triangle{
			animation: tr5 1s steps(1) forwards 13 $sdel-13;
			&:nth-child(1){
				left: 50%;
				border-top: $w*.1 solid;
				transform: translateX(-50%);
			}
			&:nth-child(2){
				top: 50%;
				right: 0;
				border-right: $w*.1 solid;
				transform: translateY(-50%);
			}
			&:nth-child(3){
				left: 50%;
				bottom: 0;
				border-bottom: $w*.1 solid;
				transform: translateX(-50%);
			}
			&:nth-child(4){
				top: 50%;
				border-left: $w*.1 solid;
				transform: translateY(-50%);
			}
		}
}
.ver-6{
	opacity: 0;
	animation: show-box 0s steps(1) forwards $sdel-13;
	.box{
		overflow: hidden;
		.heart{
			animation: heart-zoom-in 8.5s linear $sdel-13 forwards;
			transform: translate(-50%, -50%) scale(0);
			z-index: 1;
		}
		.words{
			p{
				@extend .cbox;
				color: $whitey;
				//opacity: 0.6;
				white-space: nowrap;
			}
			&.p1{
				p{
					animation: v5-run linear forwards;
					font-size: $h*.2;
					left: 210%;
					$delays: 0,1,2.4,4.6,5.8;
					$durations: 1,1.5,1.4,1.2,2.4;
					@for $i from 0 to 5{
						$ii: $i+1;
						&:nth-child(#{$ii}){
							animation-delay: $sdel-13 + nth($delays,$ii);
							animation-duration: nth($durations,$ii)*1.5s;
						}
					}
				}	
			}
			&.p2{
				p{
					opacity: 0;
					animation: show-box 0s steps(1) forwards;
					background-color: $pink;
					padding: $w*.01 $w*.002;
					transform: none;
					font-size: $h*.1;
					text-align: center;
					width: 20%;
					height: 20%;
					$delays: 9.8,9.9,10,10.2;
					$lefts: 0,1,1,0;
					$tops: 0,0,1,1;
					@for $i from 0 to 4{
						$ii: $i+1;
						&:nth-child(#{$ii}){
							top: nth($tops,$ii)*80%;
							left: nth($lefts,$ii)*80%;
							animation-delay: $sdel-13 + nth($delays,$ii);
						}
					}
				}	
			}
			&.nate{
				p{
					opacity: 0;
					top: 40%;
					font-size: $h*.2;
					animation: show-box 0s steps(1) ($sdel-13 + 8.5s) forwards;
					z-index: 10;
				}
			}
		}
	}
}
.outro{
	opacity: 0;
	animation: show-box 0s steps(1) forwards $sdel-14;
	.box{
		overflow: hidden;
		.lines{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			&.hor{
				animation: lines-1 7s linear $sdel-14 forwards reverse;
				border-top: medium solid $h-line;
				border-bottom: medium solid $h-line;
			}
			&.ver{
				animation: lines-2 7s linear $sdel-14 forwards reverse;
				border-left: medium solid $v-line;
				border-right: medium solid $v-line;
			}
		}
	}
	p{
		@extend .cbox;
		font-size: $h*.35;
		color: $bg-darker;
		animation: outro-text 1.5s steps(1) ($sdel-14 + .5) 5;
	}
	.img-box{
		animation: show-box 0s steps(1) forwards ($sdel-14 + 7s);
		.img-holder{
			@extend .cbox;
			width: 100%;
			height: 100%;
			animation: none;
		}
	}
}
.credits{
	opacity: 0;
	animation: show-box 0s steps(1) forwards $sdel-15;
	@extend .cbox;
	width: 100%;
	height: 100%;
	background-color: transparentize($bg-darker, .2);
	padding: $w*.1;
	p{
		text-align: center;
		font-family: Arial;
		color: $whitey;
		padding: $w*.02;
		font-size: $h*.05;
	}
	a{
		color: $yellow;
	}
}
/////////  keyframes ///////////////
@keyframes outro-text{
	from{
		text-shadow: -1px 1px 0px transparentize($yellow, .7);
	}
	50%{
		text-shadow: 1px -1px 0px transparentize($yellow, .7);
	}
}
@keyframes show-box{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
@keyframes tr1{
	0%{
		color: $blue;
	}
	3%{
		color: $blue;
	}
	5%{
		color: $bg-darker;
	}
}
@keyframes tr-splash{
	0%{
		background-color: $pink;
	}
	3%{
		background-color: $pink;
	}
	5%{
		background-color: $bg-lighter;
	}
}
@keyframes o-in{
	from{
		transform: translateX(-50%) translateY(-45%) scale(.5);
	}
	to{
		transform: translateX(-50%) translateY(-45%) scale(1);
	}
}
@keyframes oy-out{
	from{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}
@keyframes lines-1{
	to{
		height: 0;
	}
}
@keyframes lines-2{
	to{
		width: 0%;
	}
}
@keyframes ytr{
	0%{
		opacity: 0;
		transform: translateX(-33%) translateY(-56%) rotate(-24deg) scale(1.4);
	}
	5%{
		opacity: 1;
		transform: translateX(-33%) translateY(-56%) rotate(-24deg) scale(1.4);
	}
	to{
		opacity: 1;
		transform: translateX(-50%) translateY(-50%) rotate(-4deg) scale(0);
	}
}
@keyframes heart-out{
	0%{
		opacity: 0;
		transform: translateX(-35%) translateY(-40%) rotate(-40deg) scale(1.2);
	}
	5%{
		opacity: 1;
		transform: translateX(-35%) translateY(-40%) rotate(-40deg) scale(1.2);
	}
	to{
		opacity: 1;
		transform: translateX(-50%) translateY(-50%) rotate(0deg) scale(0);
	}
}
@keyframes p-zoom-out{
	0%{
		opacity: 0;
		transform: translate(-50%, -50%) scale(1);
	}
	5%{
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
	100%{
		opacity: 1;
		transform: translate(-50%, -50%) scale(.01);
	}
}
@keyframes p-flash{
	15%{
		opacity: 1;
	}
	85%{
		opacity: 1;
	}
}
@keyframes lines{
	to{
		width: 100%;
		height: 100%;
	}
}
@keyframes line-box-flash{
	0%{
		background-color: $line-box-1;
	}
	10%{
		background-color: $line-box-1;
	}
	11%{
		background-color: $line-box-2;
	}
	15%{
		background-color: $line-box-2;
	}
	18%{
		background-color: $line-box-1;
	}
	50%{
		background-color: $line-box-1;
	}
	60%{
		background-color: $line-box-1;
	}
	61%{
		background-color: $line-box-2;
	}
	65%{
		background-color: $line-box-2;
	}
	68%{
		background-color: $line-box-1;
	}
}
@keyframes pulse-two{
	from{
		background-color: $bg-darker
	}
	90%{
		background-color: $bg-darker;
	}
	to{
		background-color: $pink;
	}
}
@keyframes big-time{
	to{
		left: -$w*1.2;
	}
}
@keyframes small-time{
	to{
		left: -$w*.8;
	}
}
@keyframes green-bar-a{
	to{
		transform: rotate(1turn);
	}
}
@keyframes green-bar-r{
	0%{
		left: 15%;
		top: 20%;
	}
	25%{
		left: 85%;
		top: 20%;
	}
	50%{
		left: 85%;
		top: 80%;
	}
	75%{
		left: 15%;
		top: 80%;
	}
}
@keyframes flash-p-3{
	from{
		opacity: 0;
	}
	10%{
		opacity: .9;
	}
	80%{
		opacity: .7;
	}
	to{
		opacity: 0;
	}
}
@keyframes switch-bg-before{
	100%{
		background-color: transparent;
		color: transparent;
	}
}
@keyframes switch-bg-after{
	100%{
		width: 100%;
	}
}
@keyframes tr2{
	0%{
		color: $purple;
	}
	30%{
		color: $bg-darker;
	}
}
@keyframes tr2-splash{
	0%{
		background-color: $bg-lighter;
	}
	70%{
		background-color: $teal;
	}
}
@keyframes tr2-end{
	to{
		height: 1%;
	}
}
@keyframes tr3{
	0%{
		color: $purple;
	}
	30%{
		color: $bg-darker;
	}
}
@keyframes time-flash{
	0%{
		background-color: white;
	}
	8%{
		background-color: $indigo;
	}
	30%{
		background-color: $indigo;
	}
	32%{
		background-color: $whitey;
	}
	40%{
		background-color: $indigo;
	}
	70%{
		background-color: $indigo;
	}
	72%{
		background-color: $whitey;
	}
	80%{
		background-color: $indigo;
	}
}
@keyframes time-2{
	to{
		left: -350%;
	}
}
@keyframes chor-run{
	to{
		left: -280%;
	}
}
@keyframes tr4{
	0%{
		color: $teal;
	}
	3%{
		color: $teal;
	}
	5%{
		color: $bg-darker;
	}
}
@keyframes v5-run{
	to{
		left: -280%;
	}
}
@keyframes v5-fall{
	to{
		top: 110%;
	}
}
@keyframes pulse-star{
	to{
		opacity: 0;
	}
}
@keyframes big-time-alt{
	to{
		transform: rotate(-30deg) translate(-125%, -110%) scale(1.6);
	}
}
@keyframes small-time-alt{
	to{
		transform: rotate(-30deg) translate(-55%, -45%) scale(.6);
	}
}
@keyframes zoom-img{
	to{
		width: 100%;
		height: 100%;
	}
}
@keyframes tr5{
	from{
		color: $yellow;
	}
	50%{
		color: $purple;
	}
}
@keyframes bg-7-flash{
	from{
		background-color: $purple;
	}
	50%{
		background-color: $yellow;
	}
}
@keyframes heart-zoom-in{
	to{
		transform:  translate(-50%, -46%) scale(.4);
	}
}
              
            
!

JS

              
                
              
            
!
999px

Console