Hamburger icon animation

Question

I am working on a hamburger icon animation. The current state of the burger icon is itself the result of what I am trying to achieve. But there is a little odd thing that I am trying to fix.

This three-span are three lines of the burger. Each line has a width of200% and the background color of 50% red and 50% black from left. To create animation, Initially, I am showing the black part by giving negative margin and on hover showing red part. And for hover out, here for each line I am also setting transition delay to not let these lines return to its own state so fast because other lines are coming from left which is creating animation as required.

And

These three span are same three line of the burger. Actually, these are the lines that we see in burger icon while not hovering. But while hovering these lines go to left (hidden) and comes with animation delay when hovering out.

What I am trying to fix is when I hover if I do it a few times and with not much gap in duration, It looks bad. Is there any idea to fix this issue? Thank you.

Here is the fiddle

.burger {
  display: flex;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-right: -16px;
  background: transparent;
  border: 1px solid #ddd;
}

.burger .burger__icon {
  width: 24px;
  height: 20px;
  overflow: hidden;
  display: block;
}

.burger__icon-lines, .burger__icon-lines-copy {
  display: block;
}

.burger__icon-lines span,
.burger__icon-lines-copy span {
  height: 2px;
  display: block;
  margin-top: 7px;
  width: 100%;
}

.burger__icon-lines span:first-child,
.burger__icon-lines-copy span:first-child {
  margin-top: 0;
}

.burger__icon-lines span {
  width: 200%;
  margin-left: -100%;
  transition: 0.3s;
  background: linear-gradient(to right, #fc3e1d 0%, #fc3e1d 50%, #222 50%, #222 100%);
}

.burger__icon-lines span:nth-child(1) {
  transition-delay: 0.3s;
}

.burger__icon-lines span:nth-child(2) {
  transition-delay: 0.4s;
}

.burger__icon-lines span:nth-child(3) {
  transition-delay: 0.5s;
}

.burger__icon-lines-copy {
  margin-top: -19.5px;
}

.burger__icon-lines-copy span {
  transition: 0.3s;
  background: #222;
}

.burger__icon-lines-copy span:nth-child(1) {
  transition-delay: 0.1s;
}

.burger__icon-lines-copy span:nth-child(2) {
  transition-delay: 0.2s;
}

.burger__icon-lines-copy span:nth-child(3) {
  transition-delay: 0.3s;
}

.burger:hover .burger__icon-lines span {
  margin-left: 0%;
}

.burger:hover .burger__icon-lines span:nth-child(1) {
  transition-delay: 0.1s;
}

.burger:hover .burger__icon-lines span:nth-child(2) {
  transition-delay: 0.2s;
}

.burger:hover .burger__icon-lines span:nth-child(3) {
  transition-delay: 0.3s;
}

.burger:hover .burger__icon-lines-copy span {
  margin-left: -24px;
  transition: none;
}

Hamburger icon animation

0 Answers