Timed 3 Bars CSS Menu

Question

I am trying to make a burger menu where the three bars fill with an orange color from left to right on hover!

Currently though I have it that when you hover, the bars fully fill with orange, and when you hover away, the bars fill with white from the right to the left!

Here is my code:

#burger-box     {
  float:right;
  width:80px;  
  height:70px;
  top:0;
  right:0;
  background:rgba(34,34,34,1);
  position:fixed;
  z-index:101}
#burger-box > #cpBtn {
  width:40%;
  height:25px;
  cursor:pointer;
  padding:25px 30% 20px 30%
}
#burger-box > #cpBtn > div {
  left:0;
  width:100%;
  height:2px;
  background:#fff;
  background:linear-gradient(to left, #fff 50%, #E18767 50%);
  background-size:200% 100%;
  background-position:right bottom;
  margin:6px 0;
  transition:background 1.75s ease
}
#burger-box > #cpBtn > div:hover {
  background:#E18767
 }
#burger-box > #cpBtn:hover > div {
  background:#E18767;
  background-position:left bottom
}

<section id="burger-box">
  <div id="cpBtn">
    <div></div>
    <div></div>
    <div></div>
  </div>  
</section>

Answer 1

Are you trying something like this?

https://jsfiddle.net/0g3n1bkh/

If that's the case then the problem was that background-gradients are not animatable.

#burger-box {
  float: right;
  width: 80px;
  height: 70px;
  top: 0;
  right: 0;
  background: rgba(34, 34, 34, 1);
  position: fixed;
  z-index: 101
}
#burger-box > #cpBtn {
  width: 40%;
  height: 25px;
  cursor: pointer;
  padding: 25px 30% 20px 30%
}
#burger-box > #cpBtn > div {
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  background: linear-gradient(to left, #fff 50%, #E18767 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  margin: 6px 0;
  transition: background 1.75s ease
}
#burger-box > #cpBtn:hover > div {
  background-position: left bottom
}

<section id="burger-box">
  <div id="cpBtn">
    <div></div>
    <div></div>
    <div></div>
  </div>
</section>

Just add the following to your CSS:

#burger-box > #cpBtn > div {
  transition-delay: 0.5s;
}
#burger-box > #cpBtn > div:first-child {
  transition-delay: 0s;
}
#burger-box > #cpBtn > div:last-child {
  transition-delay: 1s;
}