<div id="stage">
	<div id="char">
		<div id="head">

			<div id="face">
				<div id="eye-left"></div>
				<div id="eye-right"></div>
				<div id="mouth"></div>
			</div>

			<div id="cap">
				<span class="part-1"></span>
				<span class="part-2"></span>
				<span class="part-3"></span>
			</div>

			<div id="gear">
				<span class="top">

				</span>
				<span class="left"></span>
				<span class="right"></span>
			</div>
		</div>
	</div>
</div>
$bang-time: 636ms;

#stage {
	position: absolute;
	width: 100%;
	height: 100vh;
	left: 0;
	top: 0;
	
	background-color: #020712;
	background: linear-gradient(to bottom, rgba(11,19,29,1) 0%,rgba(20,24,54,1) 100%);
}

#char {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 25vh;
	height: 25vh;
	
	&::before {
		content: '';
		width: 16vh;
		height: 10vh;
		left: 4.5vh;
		top: 5.5vh;
		display: block;
		position: absolute;
		box-shadow: 0 0 30vh 0 #FFF;
		
		animation: bang-bg $bang-time*4 infinite;
	}
}

#head {
	position: absolute;
	width: 25vh;
	height: 25vh;
	animation: bang $bang-time/2 infinite ease-in-out;
	animation-timing-function: cubic-bezier(.5, .25, .1, .05);
	animation-direction:alternate;
	
	div, span {
		position: absolute;
	}
}

#cap {
	
	part-2, .part-3 {
		box-shadow: 0 0 8vh -1vh #000;
	}
	
	.part-1 {
		left: -0.5vh;
		border-top: 7vh solid rgba(#000,0.7);
		border-radius: 13vh;
		width: 26vh;
		height: 26vh;
		
		animation: bang-cap $bang-time infinite;
	}
	
	.part-2 {
		left: -0.5vh;
		border-top: 7vh solid #FFF;
		border-radius: 13vh;
		width: 26vh;
		height: 26vh;
		
		animation: bang-cap-2 $bang-time/2 infinite;
		animation-timing-function: cubic-bezier(.4, .15, .1, .05);
		animation-direction:alternate;
	}
	
	.part-3 {
		left: -0.5vh;
		border-top: 6vh solid #13181c;
		border-radius: 22vh;
		width: 26vh;
		height: 20vh;
	}
}

#face {
	width: 25vh;
	height: 25vh;
	border-radius: 12.5vh;
	background-color: #d29572;
	box-shadow: 0 0 6vh -1vh #000;
}

#mouth {
	width: 6vh;
	height: 0.5vh;
	background-color: #000;
	left: 9.5vh;
	top: 18.75vh;
	transform: rotate(6deg);
	
	animation: bang-mouth $bang-time*28 infinite;
}

#eye-left, #eye-right {
	transform: rotate(180deg);
	width: 5vh;
	height: 0.5vh;
	border-top: 2vh solid #FFF;
	top: 9.5vh;
	border-radius: 5vh;
	
	&::before {
		content: '\2688';
		position: absolute;
		left: 0.75vh;
		top: -2.75vh;
		font-size: 3.5vh;
		
		animation: bang-eye $bang-time*42 infinite;
	}
	
	&::after {
		content: '';
		display: block;
		position: absolute;
		left: 0.50vh;
		top: 0.75vh;
		font-size: 5vh;
		width: 4vh;
		height: 0.5vh;
		background-color: #000;
	}
}

#eye-left {
	left: 5.55vh;
	
	&::after {
		transform: rotate(5deg);
	}
}

#eye-right {
	right: 5.55vh;
	
	&::after {
		transform: rotate(-5deg);
	}
}

#gear {
	width: 25vh;
	
	.left, .right {
		width: 0;
		height: 0;
		top: 8.5vh;
		border-top-width: 5vh;
		border-bottom-width: 5vh;
		border-color: #000;
		border-style: solid;
	}
	
	.left {
		left: -4vh;
		border-left-width:3vh;
		border-right-width: 2vh;
		border-top-left-radius: 5vh;
		border-bottom-left-radius: 5vh;
		border-top-right-radius: 2vh;
		border-bottom-right-radius: 2vh;
	}
	
	.right {
		right: -4vh;
		border-left-width: 2vh;
		border-right-width: 3vh;
		border-top-left-radius: 2vh;
		border-bottom-left-radius: 2vh;
		border-top-right-radius: 5vh;
		border-bottom-right-radius: 5vh;
	}
	
	.top {
		width: 30vh;
		height: 15vh;
		left: -2.5vh;
		top: -2.5vh;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			display: block;
			width: 25vh;
			height: 25vh;
			left: 0.125vh;
			top: 0.5vh;
			border-radius: 14vh;
			border: 2.5vh solid #000;
		}
	}
}

@keyframes bang {
	0% {
		transform: translate(0,-10%) scale(0.86,1);
	}
	100% {
		transform: translate(0,0%) scale(0.90,1.02);
	}
}

@keyframes bang-cap {
	0%, 100% {
		border-top-width: 9vh;
	}
	50% {
		border-top-width: 10vh;
	}
}

@keyframes bang-cap-2 {
	0% {
		border-top-width: 6.75vh;
	}
	100% {
		border-top-width: 7.25vh;
	}
}

@keyframes bang-bg {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.95);
	}
}

@keyframes bang-eye {
	50%, 75% {
		left: 1.55vh;
		top: -2.65vh;
	}
	60%, 65% {
		left: 1.05vh;
		top: -2.5vh;
	}
}

@keyframes bang-mouth {
	50%, 75% {
		transform: rotate(6deg);
	}
	55%, 70% {
		transform: rotate(0deg);
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.