hamburger animate icon

hamburger.scss

.hamburger-ico {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 100;
  line-height: 70px;
  width: 20px;
  height: 20px;
  overflow: hidden;
  margin-right: 15px;
	& span {
	  position: absolute;
	  height: 1px;
	  width: 20px;
	  background-color: $primary;
	  opacity: 1;
	  transform: rotate(0deg);
	  transition: .25s ease-in-out;
		&:nth-child(1) {top: 5px;}
		&:nth-child(2) {top: 10px;}
		&:nth-child(3) {top: 15px;}
	}
	&.open span{
		&:nth-child(1) {
		  top: 10px;
		  transform: rotate(135deg);
		}
		&:nth-child(2) {
		  opacity: 0;
		  left: -60px;
		}
		&:nth-child(3) {
		  top: 10px;
		  transform: rotate(-135deg);
		}
	}
}

.hamburger-ico {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 100;
  line-height: 70px;
  width: 20px;
  height: 20px;
  overflow: hidden;
  margin-right: 15px;
}
.hamburger-ico span {
  position: absolute;
  height: 2px;
  width: 20px;
  background-color: white;
  opacity: 1;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.hamburger-ico span:nth-child(1) {top: 3px;}
.hamburger-ico span:nth-child(2) {top: 10px; left: 0px;}
.hamburger-ico span:nth-child(3) {top: 17px;}
.hamburger-ico.open span:nth-child(1) {
  top: 10px;
  transform: rotate(135deg);
}
.hamburger-ico.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}
.hamburger-ico.open span:nth-child(3) {
  top: 10px;
  transform: rotate(-135deg);
}