<div class="container">
	<!-- change the "not-animated" class to "animated" to enable animation	 -->
	<div class="icons-container not-animated">
		<div class="icon-container">
			<i class="fab fa-github fa-2x"></i>
		</div>
		<div class="icon-container">
			<i class="fab fa-dribbble fa-2x"></i>
		</div>
		<div class="icon-container">
			<i class="fab fa-codepen fa-2x"></i>
		</div>
		<div class="icon-container">
			<i class="fab fa-instagram fa-2x"></i>
		</div>
		<div class="icon-container">
			<i class="fab fa-linkedin-in fa-2x"></i>
		</div>
		<div class="icon-container">
			<i class="fab fa-behance fa-2x"></i>
		</div>
		<div class="icon-container">
			<i class="fab fa-twitter fa-2x"></i>
		</div>
		<div class="icon-container">
			<i class="fab fa-facebook-f fa-2x" style="margin: 0 5px;"></i>
		</div>
		
		
	</div>
</div>

body {
	background: #f4f4f4;
}

.container {
	max-width: 980px;
	margin: 0 auto;
}

.icons-container {
	margin: 0;
	height: 100vh;

	display: flex;
	justify-content: space-around;
	align-items: center;

	& > .icon-container {
		padding: 1em 1.2em;
		border-radius: 0.5em;

		transition: all 0.2s ease-in-out;
	}

	&.not-animated > .icon-container {
		box-shadow: -12px -12px 12px 0 rgba(255, 255, 255, 0.6),
			12px 12px 12px 0 rgba(0, 0, 0, 0.03);
		transform: scale(1.05);
	}
	&.animated > .icon-container {
		animation: raise-container 0.3s forwards 0.8s;
	}
}

@keyframes raise-container {
	from {
		box-shadow: none;
		transform: scale(1);
	}
	to {
		box-shadow: -12px -12px 12px 0 rgba(255, 255, 255, 0.6),
			12px 12px 12px 0 rgba(0, 0, 0, 0.03);
		transform: scale(1.05);
	}
}