最初我有一个盒子，通过转换在鼠标悬停时将不透明度从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>如果你想要一个在开始时将不透明度从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; }你考虑过使用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;
}<button> Button </button>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;
}
}<!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>