Chrome Transition Problem

Chrome Nested Transition runs once, re-displays the initial state then displays the end state. Making it look like the transition plays twice.

by chrisjg

HTML

<nav id="menu" class="clearfix" role="navigation">
 <article>
  <section class="content">
   <ul class="menu">
    <li class="item-1 current active">
     <a class="menu_button" href="#" >ACTIVE</a>
     <span class="reflect"></span>
    </li>
    <li class="item-2">
     <a class="menu_button" href="#" >HOVER TRANSITION</a>
     <span class="reflect"></span>
    </li>
   </ul>
  </section>
 </article>
</nav>
<div id="content" class="clearfix" role="main">
 <article>
  <header>
   <h2>
       Chrome Transition Problem
   </h2>
  </header>
  <section class="article-content">
      <br /><br /><p>In Chrome, after hovering, the nested transition for the reflection under the button runs once (nicely transitioning to opacity:0), but then re-displays the initial state (opacity:1) then displays the end state again.</p><br />
<p>
    The container for the inactive button is initially set to opacity:0.5<br />
    Inside this container the reflection is set to opacity:0<br />
    On hover the container transitions from opacity:0.5 to opacity:1, at the same time the reflection transitions from opacity:0 to opacity:1.<br />
    After hovering the container transitions from opacity:1 to opacity:0.5, at the same time the reflection transitions from opacity:1 to opacity:0<br />
    Why then does the reflection after hover re-appear only to dissapear again?<br />
</p><br />
<p>This only happens in chrome, why???</p><p></p><p></p><p>Any solution can only use CSS and HTML.</p>
  </section>
 </article>
</div>

CSS

#menu {
    margin:10px 10px;
}

ul.menu li {
    list-style-type:none;
    float: left;
    margin-right: 3.8%;
}

nav ul.menu li a {
    display:block;
}

nav ul.menu li .reflect {
    display: inline-block;
    /* transition easeInOutBack */
    -webkit-transition: opacity 3500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: opacity 3500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
           opacity: 0;

    -webkit-border-radius: 19px;
    -moz-border-radius: 19px;
    border-radius: 19px;

    border-top: solid #a3aeb1 1px;
    border-left: none;
    border-right: none;
    border-bottom: none;

    width: 100%;
    height: 38px;

    background: -moz-linear-gradient(top,  rgba(70,226,203,0.55) 0%, rgba(70,226,203,0.51) 6%, rgba(52,147,150,0.42) 17%, rgba(51,140,146,0.4) 20%, rgba(43,101,124,0.15) 37%, rgba(43,101,124,0.1) 40%, rgba(43,101,124,0.02) 48%, rgba(43,101,124,0) 55%); /* FF3.6+ */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(70,226,203,0.55)), color-stop(6%,rgba(70,226,203,0.51)), color-stop(17%,rgba(52,147,150,0.42)), color-stop(20%,rgba(51,140,146,0.4)), color-stop(37%,rgba(43,101,124,0.15)), color-stop(40%,rgba(43,101,124,0.1)), color-stop(48%,rgba(43,101,124,0.02)), color-stop(55%,rgba(43,101,124,0))); /* Chrome,Safari4+ */

    background: -webkit-linear-gradient(top,  rgba(70,226,203,0.55) 0%,rgba(70,226,203,0.51) 6%,rgba(52,147,150,0.42) 17%,rgba(51,140,146,0.4) 20%,rgba(43,101,124,0.15) 37%,rgba(43,101,124,0.1) 40%,rgba(43,101,124,0.02) 48%,rgba(43,101,124,0) 55%); /* Chrome10+,Safari5.1+ */

}

nav ul.menu li {
     /* linear transition */
    -webkit-transition: opacity 1000ms  cubic-bezier(0.250, 0.250, 0.750, 0.750);
    -moz-transition: opacity 1000ms  cubic-bezier(0.250, 0.250, 0.750, 0.750);
    opacity: 0.5;
}

nav ul.menu li:hover{
     /* linear transition */
    -webkit-transition: opacity 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
    -moz-transition: opacity 150ms...