CSS移行アニメーションがFirefoxでウォーキングしていない

Question

私は、画面の右側にポップアップする4つのアイコンを持つメニューに取り組んでいます。画面の右側に東矢印アイコンが表示され、その上にマウスカーソルを置くと4つのアイコン（通信アイコン）が表示されます これはFireFoxを除くすべてのブラウザで機能します。 どうすればこの問題を解決できますか？

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; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div id="east-exit"> 
 
    <a><i class="communicate-icon fa fa-envelope"></i></a> 
 
    <a><i class="communicate-icon fa fa-comments"></i></a> 
 
    <i class="east-exit-icon fa fa-arrow-right"></i> 
 
    <a><i class="communicate-icon fa fa-phone"></i></a> 
 
    <a><i class="communicate-icon fa fa-camera"></i></a> 
 
</div>

編集：https://jsfiddle.net/grhajrbp/

Answer 1

ちょうどあなたのz-index: -1;の＃東出口を削除

html { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    font-family: 'Roboto', sans-serif; 
 
} 
 

 
#east-exit { 
 
    display: flex; 
 
    opacity: 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; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div id="east-exit"> 
 
    <a><i class="communicate-icon fa fa-envelope"></i></a> 
 
    <a><i class="communicate-icon fa fa-comments"></i></a> 
 
    <i class="east-exit-icon fa fa-arrow-right"></i> 
 
    <a><i class="communicate-icon fa fa-phone"></i></a> 
 
    <a><i class="communicate-icon fa fa-camera"></i></a> 
 
</div>