html - CSS 的 transition 的 ease-in-out 好像不起作用

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 中，这样背景就不会突然消失，与其他部分一起淡出元素。

希望这可以帮助您了解原因:)