CSS outro过渡动画
CSS outro过渡动画
提问于 2016-08-19 13:45:38
这是一个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动画呢？
回答 2
Stack Overflow用户
发布于 2016-08-19 14:20:14
您可以使用以下代码：
.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，您可以支持大多数流行的浏览器。
如果你有更多的问题或者你想要一些不同的东西，尽管问我。
这里有一个图形转换：https://jsfiddle.net/f5ryq3yg/ (页面顶部的linear http://easings.net/ )
或者使用图形转换：https://jsfiddle.net/skvykpsj/1/ ( ease-in-out http://easings.net/#easeInOutSine)
Stack Overflow用户
发布于 2018-04-26 10:43:24
你所需要做的就是创建动画。
@keyframes { 0%{ margin:0; } 100%{ margin:100%; }等。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39031875
复制相关文章
相似问题
腾讯云开发者
