缓入适用于文本和背景，但缓出仅适用于文本。为什么？

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

您正在未覆盖状态下设置两个转换，因此第二个转换将覆盖第一个规则。您需要将转换规则应用于未覆盖状态和悬停状态。

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>