悬停动画淡入不透明度 0.5 悬停不透明度 1
Posted
技术标签:
【中文标题】悬停动画淡入不透明度 0.5 悬停不透明度 1【英文标题】：hover animation fadein opacity 0.5 hover opacity 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; <div class="box">This is a Box</div>【问题讨论】：
也许提供您的标记，或者我们必须猜测？谢谢 【参考方案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;
【讨论】：
感谢您的意见！但可能我有点不清楚。鼠标悬停过渡不应该是淡入动画的一部分。我尝试达到一个 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
fromopacity: 0;
toopacity: 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>【讨论】：
拜托，你能用更详细的解释来扩展你的答案吗？这对理解非常有用。谢谢！以上是关于悬停动画淡入不透明度 0.5 悬停不透明度 1的主要内容，如果未能解决你的问题，请参考以下文章