Logo Animation

by Lachlan Arthur

HTML

<div id="logo">
			<div id="l">
				<div id="l-in"></div>
				<div id="l-neg"></div>
			</div>
			<div id="a">
				<div id="a1">
					<div id="a1-in1"></div>
					<div id="a1-in2"></div>
					<div id="a1-neg1"></div>
					<div id="a1-neg2"></div>
				</div>
				<div id="a2">
					<div id="a2-in"></div>
				</div>
			</div>
		</div>
		<div id="flash">
			<div id="flash-in"></div>
		</div>

CSS

body {
			background: black;
			min-width: 1100px;
			min-height: 800px;
			margin: 0;
		}
		
		#flash {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			opacity: 0;
			-webkit-transition: all 0.5s linear 0.6s;
		}
			.off #flash {
				opacity: 1;
			}
		#flash-in {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			background: white;
			-webkit-transition: all 0s linear 0.5s;
		}
			.off #flash-in {
				opacity: 0;
			}
		
		#logo {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 900px;
			height: 600px;
			margin: -300px 0 0 -450px;
		}
		#logo * {
			position: absolute;
			-webkit-transition: all 0.5s cubic-bezier(0.85, 0, 1, 1);
		}
		
		#l {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 600px;
			height: 600px;
			background: #222;
		}
			.off #l {
				background: black;
			}
		#l-in {
			top: 0px;
			left: 0px;
			width: 600px;
			height: 600px;
			background: white;
		}
			.off #l-in {
				top: 300px;
				left: 450px;
				width: 0px;
				height: 0px;
			}
		#l-neg {
			top: 0px;
			left: 200px;
			width: 400px;
			height: 400px;
			background: black;
		}
		
		#a {
			position: absolute;
			top: 0px;
			left: 300px;
			width: 600px;
			height: 600px;
		}
		
		#a1 {
			top: 0px;
			left: 0px;
			width: 400px;
			height: 300px;
			overflow: hidden;
			background: #222;
		}
			.off #a1 {
				background: black;
			}
		#a1-in1 {
			top: 0px;
			left: 0px;
			width: 200px;
			height: 300px;
			background: white;
		}
			.off #a1-in1 {
				top: 300px;
				left: 150px;
				width: 0px;
				height: 0px;
			}
		#a1-in2 {
			top: 0px;
			left: 100px;
			width: 600px;
			height: 200px;
			background: white;
		}
			.off #a1-in2 {
				top: 300px;
				left: 150px;
				width: 0px;
				height: 0px;
			}
		#a1-neg1 {
			top: 200px;
			left: 200px;
			width: 200px;
			height: 150px;
			background: black;
		}
		#a1-neg2 {
			top: 200px;
			right: 200px;
			width: 0px;
			height:...

JavaScript

setTimeout(function() {
				document.querySelector('.off').classList.remove('off');
			}, 500);