CSS 的过渡缓入缓出似乎不起作用

Question

我在图像上简单地叠加了文本，在此过程中使背景变暗。我用了 transition 和 ease-in-out，但它似乎没有适当地缓和。

我知道 ease-in-out 应该应用于事物本身，而不是它的伪 :hover，但它似乎不想工作。我尝试了很多方法，四处移动，删除内容，添加内容，但似乎没有任何意义。我注意到文本确实很好地缓和了，但是 background 和 rgba 不透明度不合作。它只是快速恢复:(

请参阅 http://g4stly.com/staff.html 上的实时版本以明确了解我在说什么。

提前致谢！

我的代码如下：

#g4stly
   {
   background-image: url('http://g4stly.com/images/users/g4stly.jpg');
   }

.textFrame
   {
   text-align: center;
   font-size: 20px;
   color: #DDAA49;
   text-decoration: none;
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 30%;
   width: 250px;
   height: 250px;
   }
   
.textFrame p
   {
   opacity: 0;
   height: 75%;
   margin: 0;
   border-radius: 30%;
    transition: opacity 300ms ease-in-out;
   }
   
.textFrame p a
   {
   text-decoration: none;
   color: #976649;
   font-size: 25px;
   }
   
.textFrame:hover p
   {
   opacity: 1;
   background: rgba(0,0,0,0.8);
   }
   
.textFrame p:first-child
   {
   padding: 25% 0 0 0;
   }

<div id="g4stly" class="textFrame textFrameLeft">
  <p><a href="http://steamcommunity.com/profiles/76561198068338533/" target="_blank">g4stly</a><br><br>
  Owner of everything g4stly related<br>
  Basically, the boss.</p>
 </div>

Answer 1

我注意到您更新了代码。看来您的问题已经解决了。

.textFrame p 仅为 opacity 应用过渡，因此您看不到背景过渡。我种子你添加 background .... 到过渡，你也可以这样做：

transition: all 1000ms ease-in-out;

另一种选择是将 rgba 背景移动到 .textFrame p 内部，这样背景就不会突然消失，与元素的其余部分一起淡出。

希望这有助于您了解原因:)

Answer 2

你在应该有分号的地方多了一个逗号。

transition: background 1000ms ease-in-out;

#g4stly {
  background-image: url('http://g4stly.com/images/users/g4stly.jpg');
}

.textFrame {
  text-align: center;
  font-size: 20px;
  color: #DDAA49;
  text-decoration: none;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 30%;
  width: 250px;
  height: 250px;
}

.textFrame p {
  opacity: 0;
  height: 75%;
  margin: 0;
  border-radius: 30%;
  transition: background 1000ms ease-in-out;
  transition: opacity 1000ms ease-in-out;
}

.textFrame p a {
  text-decoration: none;
  color: #976649;
  font-size: 25px;
}

.textFrame:hover p {
  opacity: 1;
  background: rgba(0, 0, 0, 0.8);
}

.textFrame p:first-child {
  padding: 25% 0 0 0;
}

<div id="g4stly" class="textFrame textFrameLeft">
  <p><a href="http://steamcommunity.com/profiles/76561198068338533/" target="_blank">g4stly</a><br><br> Owner of everything g4stly related<br> Basically, the boss.</p>
</div>

CSS 的过渡缓入缓出似乎不起作用

CSS's transition's ease-in-out doesn't seem to work

html

css

markup