css - 悬停动画淡入不透明度 0.5 悬停不透明度 1

Question

最初我有一个盒子，它在鼠标悬停时通过过渡将不透明度从 0.5 更改为 1。它运作良好。

现在我想在不透明度从 0 到 0.5 的开头添加一个延迟的淡入动画。不幸的是，鼠标悬停过渡不再有效。

我很欣赏每一个想法:)

.box {       
width: 200px:
height: 50px;
padding:20px;
background-color: red;
transition: 1s ease;  

opacity: 0;
opacity: 0.5 \9; 
-webkit-animation:fadeIn ease-in 0.5;
-moz-animation:fadeIn ease-in 0.5;
animation:fadeIn ease-in 0.5;
	
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;

-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
	
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
animation-delay: 3.5s;
}
    
.box:hover {transition: 0.5s; opacity: 1;  }

<div class="box">This is a Box</div>

Answer 1

如果你想要一个在开始时将不透明度从 0 更改为 0.5 的淡入动画，你需要将淡入定义为:

.box {       
opacity: 0; 
-webkit-animation:fadeIn ease-in 0.5;
-moz-animation:fadeIn ease-in 0.5;
animation:fadeIn ease-in 0.5;
	
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;

-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
	
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
animation-delay: 3.5s;
}

@keyframes fadeIn{
  from{opacity: 0;}
  to{opacity: 0.5;}
}

.box:hover {transition: 0.5s; opacity: 1;  }