CSS3过渡-淡出效果
我正在尝试在纯CSS中实现“淡出”效果。这是fiddle。我确实在网上研究了几个解决方案，然而，在阅读了documentation online之后，我试图弄清楚为什么幻灯片动画不能工作。有什么建议吗？
.dummy-wrap {
animation: slideup 2s;
-moz-animation: slideup 2s;
-webkit-animation: slideup 2s;
-o-animation: slideup 2s;
}
.success-wrap {
width: 75px;
min-height: 20px;
clear: both;
margin-top: 10px;
}
.successfully-saved {
color: #FFFFFF;
font-size: 20px;
padding: 15px 40px;
margin-bottom: 20px;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #00b953;
}
@keyframes slideup {
0% {top: 0px;}
75% {top: 0px;}
100% {top: -20px;}
}
@-moz-keyframes slideup {
0% {top: 0px;}
75% {top: 0px;}
100% {top: -20px;}
}
@-webkit-keyframes slideup {
0% {top: 0px;}
75% {top: 0px;}
100% {top: -20px;}
}
@-o-keyframes slideup {
0% {top: 0px;}
75% {top: 0px;}
100% {top: -20px;}
}<div class="dummy-wrap">
<div class="success-wrap successfully-saved">Saved</div>
</div>
回答 8
Stack Overflow用户
发布于 2013-05-17 22:38:13
您可以改用过渡：
.successfully-saved.hide-opacity{
opacity: 0;
}
.successfully-saved {
color: #FFFFFF;
text-align: center;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-ms-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
opacity: 1;
}Stack Overflow用户
发布于 2014-01-04 02:07:03
这里有另一种方法来做同样的事情。
fadeIn effect
.visible {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}fadeOut effect
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}我在这里找到了更多最新的教程CSS3 Transition: fadeIn and fadeOut like effects to hide show elements和Tooltip Example: Show Hide Hint or Help Text using CSS3 Transition以及示例代码。
UPDATE 2: (添加@big-money要求的详细信息)
当显示元素时(通过切换到visible类)，我们希望visibility:visible立即生效，所以只转换opacity属性是可以的。当隐藏元素时(通过切换到隐藏类)，我们希望延迟visibility:hidden声明，这样我们就可以首先看到淡出转换。我们通过在可见性属性上声明一个转换来实现这一点，转换的持续时间为0，延迟为1。您可以查看详细的文章here。
我知道我已经来不及回答了，但为了节省其他人的时间，我把这个答案贴出来了。希望它能帮助你！！
Stack Overflow用户
发布于 2018-11-26 11:35:39
因为display不是CSS的动画属性之一。一个display:none fadeOut动画替换为纯CSS3动画，只需在最后一帧设置width:0和height:0，并使用animation-fill-mode: forwards保留width:0和height:0属性。
@-webkit-keyframes fadeOut {
0% { opacity: 1;}
99% { opacity: 0.01;width: 100%; height: 100%;}
100% { opacity: 0;width: 0; height: 0;}
}
@keyframes fadeOut {
0% { opacity: 1;}
99% { opacity: 0.01;width: 100%; height: 100%;}
100% { opacity: 0;width: 0; height: 0;}
}
.display-none.on{
display: block;
-webkit-animation: fadeOut 1s;
animation: fadeOut 1s;
animation-fill-mode: forwards;
}https://stackoverflow.com/questions/15907079
复制相似问题
腾讯云开发者
