[英]CSS outro transition animation
这是HTML。 如果我添加过渡规则,它将具有过渡过渡。 但是,当我添加动画规则时,动画不起作用。
<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上制作outro动画呢?
您可以使用以下代码:
.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
您可以支持大多数流行的浏览器。
如果您还有其他问题或想要其他不同的东西,请问我。
这是一个带有linear
过渡的小提琴: https : //jsfiddle.net/f5ryq3yg/ (在页面顶部的图片http://easings.net/ )
或具有ease-in-out
转换的功能: https : //jsfiddle.net/skvykpsj/1/ (图http://easings.net/#easeInOutSine )
您需要做的就是创建动画。
@keyframes { 0%{ margin:0; } 100%{ margin:100%; }
等等
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.