イーズインはテキストとバックグラウンドの両方で機能しますが、イージーアウトはテキストのみで機能します。どうして？

Question

イーズインはテキストとバックグラウンドでのみ機能しますが、イージーアウトはテキストでは機能しますがバックグラウンドでは機能しません。

article { 
 
    width: 100%; 
 
    height: 1000px; 
 
    background-color: #fffff; 
 
    color: #00000; 
 
} 
 

 
article .topnav { 
 
    opacity: 0; 
 
    transition: background-color .9s ease-out; 
 
    transition: background-color .9s ease-in; 
 
    -moz-transition: background-color .9s ease-in; 
 
    -webkit-transition: background-color .9s ease-in; 
 
} 
 

 
article .topnav { 
 
    background: rgba(0,0,0,0); 
 
    transition: opacity .9s ease-out; 
 
    transition: opacity .9s ease-in; 
 
    -moz-transition: opacity .9s ease-in; 
 
    -webkit-transition: opacity .9s ease-in; 
 
} 
 

 
article:hover p.topnav { 
 
    opacity: 0.7; 
 
    background-color: #808080; 
 
} 
 

 
.topnav { 
 
    visibility: invisible; 
 
    text-align: center; 
 
    margin: auto; 
 
    width: 50%; 
 
}

<article> 
 
    <p class="topnav">I am topnav</p> 
 
</article>

fiddleを参照してください。

私が入ったり来たりすると、テキストと背景が一緒に出入りするようになります。

助けてください。

Answer 1

両方のトランジションを非表示の状態に設定しているため、2番目のトランジションは最初のルールを上書きしています。あなたは、移行されていない状態とホバリングされた状態の両方に遷移規則を適用する必要があります。

article { 
 
    width: 100%; 
 
    height: 1000px; 
 
    background-color: #fffff; 
 
    color: #00000; 
 
} 
 

 
article p.topnav { 
 
    opacity: 0; 
 
    background-color: #000; 
 
    transition: all .9s ease-out; 
 
} 
 

 
article:hover p.topnav { 
 
    opacity: 0.7; 
 
    background-color: #808080; 
 
    transition: all .9s ease-in; 
 
} 
 

 
.topnav { 
 
    text-align: center; 
 
    margin: auto; 
 
    width: 50%; 
 
}

<article> 
 
    <p class="topnav">I am topnav</p> 
 
</article>