CSS/ハンバーガーから✖印へ

#sample, #sample2, #sample3, #sample4, #sample5,#sample6, #sample7, #sample8 {
	margin: 50px;
	padding: 15px 15px 10px;
	display: inline-block;
	border: 3px solid #555;
	border-radius: 50%;
}

.sanbon,
.sanbon span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.sanbon {
	position: relative;
	width: 37px;
	height: 33px;
}
.sanbon span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #333;
	border-radius: 3px;
}
.sanbon span:nth-of-type(1) {
	top: 0;
}
.sanbon span:nth-of-type(2) {
	top: 15px;
}
.sanbon span:nth-of-type(3) {
	bottom: 0;
}

.add span:nth-of-type(1) {
	-webkit-transform: translateY(15px) rotate(-45deg);
	transform: translateY(15px) rotate(-45deg);
}
.add span:nth-of-type(2) {
	opacity: 0;
}
.add span:nth-of-type(3) {
	-webkit-transform: translateY(-15px) rotate(45deg);
	transform: translateY(-15px) rotate(45deg);
}

.add2 span:nth-of-type(1) {
	-webkit-transform: translateY(15px) rotate(-315deg);
	transform: translateY(15px) rotate(-315deg);
}
.add2 span:nth-of-type(2) {
	opacity: 0;
}
.add2 span:nth-of-type(3) {
	-webkit-transform: translateY(-15px) rotate(315deg);
	transform: translateY(-15px) rotate(315deg);
}

.add3 {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}
.add3 span:nth-of-type(1) {
	-webkit-transform: translateY(15px) rotate(-45deg);
	transform: translateY(15px) rotate(-45deg);
}
.add3 span:nth-of-type(2) {
	-webkit-transform: translateY(0) rotate(45deg);
	transform: translateY(0) rotate(45deg);
}
.add3 span:nth-of-type(3) {
	opacity: 0;
}

.add4 span:nth-of-type(1) {
	-webkit-transform: translateY(15px) rotate(-45deg);
	transform: translateY(15px) rotate(-45deg);
}
.add4 span:nth-of-type(2) {
	left: 50%;
	opacity: 0;
	-webkit-animation: active-menu-bar02 .8s forwards;
	animation: add4bar .8s forwards;
}
@-webkit-keyframes add4bar {
	100% {
		height: 0;
	}
}
@keyframes add4bar {
	100% {
		height: 0;
	}
}
.add4 span:nth-of-type(3) {
	-webkit-transform: translateY(-15px) rotate(45deg);
	transform: translateY(-15px) rotate(45deg);
}

.add5 span:nth-of-type(1) {
	-webkit-animation: add5bar .75s forwards;
	animation: add5bar .75s forwards;
}
@-webkit-keyframes add5bar {
	0% {
		-webkit-transform: translateY(15px) rotate(45deg);
	}
	50% {
		-webkit-transform: translateY(15px) rotate(0);
	}
	100% {
		-webkit-transform: translateY(0) rotate(0);
	}
}
@keyframes add5bar {
	0% {
		transform: translateY(15px) rotate(45deg);
	}
	50% {
		transform: translateY(15px) rotate(0);
	}
	100% {
		transform: translateY(0) rotate(0);
	}
}
.add5 span:nth-of-type(2) {
	transition: all .25s .25s;
	opacity: 1;
}
.add5 span:nth-of-type(3) {
	-webkit-animation: add5bar2 .75s forwards;
	animation: add5bar2 .75s forwards;
}
@-webkit-keyframes add5bar2 {
	0% {
		-webkit-transform: translateY(-15px) rotate(-45deg);
	}
	50% {
		-webkit-transform: translateY(-15px) rotate(0);
	}
	100% {
		-webkit-transform: translateY(0) rotate(0);
	}
}
@keyframes add5bar2 {
	0% {
		transform: translateY(-15px) rotate(-45deg);
	}
	50% {
		transform: translateY(-15px) rotate(0);
	}
	100% {
		transform: translateY(0) rotate(0);
	}
}
.add5-2 span:nth-of-type(1) {
	-webkit-animation: add5bar3 .75s forwards;
	animation: add5bar3 .75s forwards;
}
@-webkit-keyframes add5bar3 {
	0% {
		-webkit-transform: translateY(0) rotate(0);
	}
	50% {
		-webkit-transform: translateY(15px) rotate(0);
	}
	100% {
		-webkit-transform: translateY(15px) rotate(45deg);
	}
}
@keyframes add5bar3 {
	0% {
		transform: translateY(0) rotate(0);
	}
	50% {
		transform: translateY(15px) rotate(0);
	}
	100% {
		transform: translateY(15px) rotate(45deg);
	}
}
.add5-2 span:nth-of-type(2) {
	opacity: 0;
}
.add5-2 span:nth-of-type(3) {
	-webkit-animation: add5bar4 .75s forwards;
	animation: add5bar4 .75s forwards;
}
@-webkit-keyframes add5bar4 {
	0% {
		-webkit-transform: translateY(0) rotate(0);
	}
	50% {
		-webkit-transform: translateY(-15px) rotate(0);
	}
	100% {
		-webkit-transform: translateY(-15px) rotate(-45deg);
	}
}
@keyframes add5bar4 {
	0% {
		transform: translateY(0) rotate(0);
	}
	50% {
		transform: translateY(-15px) rotate(0);
	}
	100% {
		transform: translateY(-15px) rotate(-45deg);
	}
}

.add6 {
	-webkit-animation: menu-close .6s;
	animation: menu-close .6s;
}
.add6-2 {
	-webkit-animation: menu-open .6s;
	animation: menu-open .6s;
}
@-webkit-keyframes menu-close {
	30% {
		-webkit-transform: scale(0);
		opacity: 0;
	}
	100% {
		-webkit-transform: scale(1);
		opacity: 1;
	}
}
@keyframes menu-close {
	30% {
		transform: scale(0);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
@-webkit-keyframes menu-open {
	30% {
		-webkit-transform: scale(0);
		opacity: 0;
	}
	100% {
		-webkit-transform: scale(1);
		opacity: 1;
	}
}
@keyframes menu-open {
	30% {
		transform: scale(0);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
.add6-2 span:nth-of-type(1) {
	-webkit-transform: translateY(15px) rotate(-45deg);
	transform: translateY(15px) rotate(-45deg);
}
.add6-2 span:nth-of-type(2) {
	opacity: 0;
}
.add6-2 span:nth-of-type(3) {
	-webkit-transform: translateY(-15px) rotate(45deg);
	transform: translateY(-15px) rotate(45deg);
}

.add7 span:nth-of-type(2)::after {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 3px;
	background-color: #333;
	border-radius: 3px;
	transition: all .4s;
}
.add7-2 span:nth-of-type(1) {
	transform: translate(50%) scale(0);
}
.add7-2 span:nth-of-type(2) {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.add7-2 span:nth-of-type(2)::after {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
.add7-2 span:nth-of-type(3) {
	transform: translate(-50%) scale(0);
}

#sample8 {
	border: 0;
}
.add8::after {
	position: absolute;
	left: -5px;
	bottom: -30px;
	content: 'OPEN';
	display: block;
	width: 100%;
	color: #333;
	font-size: 16px;
	text-decoration: none;
	text-align: center;
	transition: all .4s;
}
.add8-2::after {
	content: 'CLOSE';
	bottom: -25px;
}
.add8-2 span:nth-of-type(1) {
	-webkit-transform: translateY(15px) rotate(-45deg);
	transform: translateY(15px) rotate(-45deg);
}
.add8-2 span:nth-of-type(2) {
	opacity: 0;
}
.add8-2 span:nth-of-type(3) {
	-webkit-transform: translateY(-15px) rotate(45deg);
	transform: translateY(-15px) rotate(45deg);
}