悬停动画淡入不透明度 0.5 悬停不透明度 1答案

【问题标题】：hover animation fadein opacity 0.5 hover opacity 1悬停动画淡入不透明度 0.5 悬停不透明度 1
【发布时间】：2018-01-23 06:26:08
【问题描述】：

最初我有一个框，它通过过渡将鼠标悬停时的不透明度从 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;  }

&lt;div class="box"&gt;This is a Box&lt;/div&gt;

【问题讨论】：

也许提供您的标记，或者我们必须猜测？谢谢

标签： css hover css-transitions css-animations

【解决方案1】：

您是否考虑过使用 LESS？

button {
  width: 100px;
  float: left;
  background: #007cbe;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px;
  cursor: pointer;
}
button:hover {
  -webkit-transition: 3.5s;
  -moz-transition: 3.5s;
  -ms-transition: 3.5s;
  -o-transition: 3.5s;
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}

&lt;button&gt; Button &lt;/button&gt;

LESS 版本

.transition (@transition) {
	-webkit-transition: @transition;  
	-moz-transition:    @transition;
	-ms-transition:     @transition; 
	-o-transition:      @transition;  
}

.opacity (@opacity: 0.5) {
	-webkit-opacity: 	@opacity;
	-moz-opacity: 		@opacity;
	opacity: 		@opacity;
}

button {
  width:100px;
  float:left;
  background:#007cbe;
  color:#fff;
  border:none;
  border-radius:4px;
  padding:10px;
  cursor:pointer;
  &:hover {
    .transition(3.5s);
    .opacity;
  }
}

【讨论】：

感谢您的意见！但可能我有点不清楚。鼠标悬停过渡不应该是淡入动画的一部分。我尝试达到一个 div，它首先从不透明度 0 淡入到 0.5（一次）。之后，在鼠标悬停的情况下，它应该将不透明度从 0.5 更改为 1，鼠标移出时从 1 更改为 0.5。

【解决方案2】：

如果您想要一个在开始时将不透明度从 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;  }

【讨论】：

【解决方案3】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


  <style type="text/css">
    
#element{
    -webkit-animation: 3s ease 0s normal forwards 1 fadein;
    animation: 3s ease 0s normal forwards 1 fadein;
}

@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:0.5; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:0.5; }
}

/* Additional styles not required */
.pretty {
    background: yellow;
    font-family: helvetica, arial, sans-serif;
    padding: 40px 20px;
    text-align: center;
    width: 100%;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 30px;
}

/*#element:hover {
  opacity: 1;
  }*/

  </style>


</head>
<body>

<div id="element" class="pretty">This is a Box</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">
  
  $(document).ready(function() {
  $('.pretty').hover(
      function() { // handler in
        $( this ).css('opacity', 1);
        // Additional actions (display info, etc.)
      }, function() { // handler out
        $( this ).css('opacity', 0.5).css('animation', 'none');
        // Additional actions (hide info, etc.)
      }
  );
})

</script>
</body>
</html>

【讨论】：

拜托，你能用更详细的解释来扩展你的答案吗？这对理解非常有用。谢谢！