<div class="container">
	<div class="normal"></div>
	<div class="hover"></div>
</div>

body {
  background: #fff;
}

.container {
			width: 262px;
			height: 263px;

			margin: 0 auto;

			position: relative;
		}

		.normal,
		.hover {
			position: absolute;
			width: 100%;
			height: 100%;

			/*display: none;*/
		}

		.normal {
			border: 2px solid #000;
		}

		.hover {
			border: 2px solid rgba(0,0,0,0);
		}

		.normal:before,
		.normal:after {
			content: '';
			display: block;
			position: absolute;
			width: 68px;
			height: 0px;
			left: 50%;
			margin-left: -36px;

			border: 2px solid #fff;

			transition: width 0.15s linear 0.15s, left 0.15s linear 0.15s, margin 0.15s linear 0.15s, height 0.15s linear;
		}

		div:hover .normal:before,
		div:hover .normal:after {
			width: 100%;
			height: 131.5px;

			left: -2px;
			margin-left: 0;

			transition: width 0.15s linear, left 0.15s linear, margin 0.15s linear, height 0.15s linear 0.15s;

		}

		.hover:before,
		.hover:after {
			content: '';
			display: block;
			position: absolute;
			width: 0;
			height: 0;
			left: 50%;

			border-color: #000;
			border-style: solid;
			border-width: 0;

			transition: width 0.15s linear 0.15s, left 0.15s linear 0.15s, margin 0.15s linear 0.15s, border 0.01s linear 0.3s;
		}

		.normal:before,
		.hover:before {
			top: -2px;

			border-bottom: none;
		}

		.normal:after,
		.hover:after {
			bottom: -2px;

			border-top: none;
		}

		div:hover .hover:before,
		div:hover .hover:after {
			width: 68px;
			margin-left: -36px;

			border-width: 2px;

			transition: width 0.15s linear 0.15s, left 0.15s linear 0.15s, margin 0.15s linear 0.15s, border 0.01s linear 0.15s;
		}