这是一个 HTML。如果我添加过渡规则,它有 outro 过渡。但是当我添加动画规则时,它的动画不起作用。
<div class="dropdown">
<span>Hover me!</span>
<div class="dropdown-content">
<p>CONTENT</p>
</div>
</div>
<style>
.dropdown{
position: relative;
width: 200px;
}
.dropdown-content{
display: none;
position: absolute;
background-color: #f9f9f9;
margin-left: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
animation-name: anim1;
animation-duration: 0.5s;
width: 600px;
}
@keyframes anim1{
0%{
opacity:0;
}
100%{
opacity:1;
}
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
那么如何在 CSS 上制作结尾动画呢???
最佳答案
您可以使用此代码:
.dropdown {
position: relative;
width: 200px;
}
.dropdown-content {
position: absolute;
background-color: #f9f9f9;
margin-left: 200px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 1;
width: 600px;
opacity: 0;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.dropdown:hover .dropdown-content {
opacity: 1;
}
<div class="dropdown">
<span>Hover me!</span>
<div class="dropdown-content">
<p>CONTENT</p>
</div>
</div>
或者您可以将 linear
更改为您选择的另一个过渡。
通过使用 -webkit-transition
, -moz-transition
, -o-transition
& transition
你支持大多数流行的浏览器。
如果您还有其他问题或想要不同的东西,请问我。
这是一个带有线性
转换的 fiddle :https://jsfiddle.net/f5ryq3yg/ (页面顶部的图表 http://easings.net/)
或者带有ease-in-out
转换的:https://jsfiddle.net/skvykpsj/1/ (图http://easings.net/#easeInOutSine)
关于html - CSS outro 过渡动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39031875/