<div id="wrap">

	<div class="block block--left"></div>
	<div class="block block--rite"></div>

</div>

//	autoprefixer: true

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #fff;
	color: #fff;
	font-size: 18px;
	font-family: 'Open Sans', sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	outline: none;
}

.block {
	position: relative;
	width: 25vmin;
	height: 25vmin;
	margin: 20px;
	border-radius: 10px;
	background-color: #5ab267;
	opacity: 0;
	visibility: hidden;
	transition: 1s ease;
	box-shadow: 0 0 0 fade(#000, 0%);

	&--left {
		transform: translateX(calc(~'12.5vmin + 10px'));
	}

	&--rite {
		transform: translateX(calc(~'-12.5vmin - 10px'));
	}
}

#wrap {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

	&.state-0 {
		.block {
			opacity: 1;
			visibility: visible;

			&--left,
			&--rite {
				transform: translateX(0);
			}
		}
	}

	&.state-1 {
		.block {
			opacity: 1;
			visibility: visible;

			&--left {
				transform: translateX(calc(~'12.5vmin + 10px'));
			}

			&--rite {
				transform: scale(1.2);
				background-color: #1aa6d0;
				box-shadow: 0 0 20px fade(#000, 25%);
			}
		}
	}
	
	&.state-2 {
		.block {
			opacity: 1;
			visibility: visible;

			&--left {
				transform: translateX(0) scale(1.2);
				background-color: #ea922c;
				box-shadow: 0 0 20px fade(#000, 25%);
			}

			&--rite {
				transform: translateX(calc(~'-12.5vmin - 10px'));
			}
		}
	}
}

var i = 0;

$(function () {
	$('#wrap').click(function () {
		$('#wrap').attr('class', 'state-' + i);
		
		i++;

		if (i > 2) {
			i = 0;
		}
	});
});