Question

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

现在我想在开始时从不透明度0到0.5添加延迟淡入动画。不幸的是，鼠标悬停过渡不再起作用。

我很欣赏每一个想法：）

＆＃13;

.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;  }

＆＃13;

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

＆＃13;

Answer 1

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

.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;  }

Answer 2

你考虑过使用LESS吗？

＆＃13;

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;
}

＆＃13;

<button> Button </button>

＆＃13;

LESS版本

＆＃13;

.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;
  }
}

＆＃13;

Answer 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>

悬停动画fadein opacity 0.5悬停不透明度1

3 个答案: