title: CSS transition animation on hover not woking in Firefox
body: <p>I'm working on a menu with four icons that pops up on the right side of the screen. An arrow is shown on the right side of the screen (east-exit-icon) and if you hover over it, it shows four other icons (communicate-icon)
  This works for every browsers but FireFox.
  Does anyone how I can solve this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
  }
  
  #east-exit {
    display: flex;
    opacity: 1;
    z-index: -1;
    align-items: stretch;
    justify-content: space-around;
    flex-direction: column;
    position: absolute;
    right: 0;
    height: 100%;
    width: 85px;
    font-size: 55px;
  }
  
  .east-exit-icon {
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    -ms-transition: all .2s ease;
    transition: all .2s ease;
    font-size: 45px;
    opacity: 0.1;
  }
  
  #east-exit:hover .east-exit-icon { opacity: 0; }
  
  .communicate-icon {
    z-index: 1;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    color: darkgrey;
    opacity: 0;
  }
  
  #east-exit:hover .communicate-icon { opacity: 1; }
  
  .communicate-icon:hover,
  .communicate-icon:focus,
  .communicate-icon:active {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    color: grey;
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/&gt;
  
  &lt;div id="east-exit"&gt;
    &lt;a&gt;&lt;i class="communicate-icon fa fa-envelope"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;a&gt;&lt;i class="communicate-icon fa fa-comments"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;i class="east-exit-icon fa fa-arrow-right"&gt;&lt;/i&gt;
    &lt;a&gt;&lt;i class="communicate-icon fa fa-phone"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;a&gt;&lt;i class="communicate-icon fa fa-camera"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Edit: <a href="https://jsfiddle.net/grhajrbp/" rel="nofollow">https://jsfiddle.net/grhajrbp/</a></p>