CSS3过渡-淡出效果

小开

您忘记向 .dummy-wrap类添加位置属性，顶部/左侧/底部/右侧值不适用于静态定位的元素(默认值)

小开

最佳答案

你可以使用过渡:

.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;
}

小开

这里有另一种方法来做同样的事情。

衰退效应

.visible {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}

淡出效应

.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}

UPDATE 1: 我在这里找到了更多带有示例代码的最新教程 CSS3过渡: 类似 fadeIn 和 fadeOut 的效果来隐藏 show 元素和工具提示示例: 使用 CSS3转换显示隐藏提示或帮助文本。

UPDATE 2:(由@big-money 请求添加详细信息)

当显示元素时(通过切换到可见类) ，我们希望 visibility:visible立即生效，所以只转换不透明属性是可以的。当隐藏元素时(通过切换到隐藏类) ，我们希望延迟 visibility:hidden声明，这样我们可以首先看到淡出转换。为此，我们在可见性属性上声明了一个转换，其持续时间为0，并有一个延迟。您可以看到一篇详细的文章给你。

我知道我现在回答太晚了，但是发布这个回答可以节省其他人的时间。希望对你有所帮助! ！

小开

.fadeOut{
background-color: rgba(255, 0, 0, 0.83);
border-radius: 8px;
box-shadow: silver 3px 3px 5px 0px;
border: 2px dashed yellow;
padding: 3px;
}
.fadeOut.end{
transition: all 1s ease-in-out;
background-color: rgba(255, 0, 0, 0.0);
box-shadow: none;
border: 0px dashed yellow;
border-radius: 0px;
}

演示在这里。

小开

这是你问题的工作代码。
享受编码... 。

<html>
<head>


<style>


.animated {
background-color: green;
background-position: left top;
padding-top:95px;
margin-bottom:60px;
-webkit-animation-duration: 10s;animation-duration: 10s;
-webkit-animation-fill-mode: both;animation-fill-mode: both;
}


@-webkit-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}


@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}


.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
</style>


</head>
<body>


<div id="animated-example" class="animated fadeOut"></div>


</body>
</html>

小开

因为 display不是可动画的 CSS 属性之一。一个 display:none淡出动画替换纯 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;
}

小开

这可能会有所帮助:-

<!DOCTYPE html>
<html>
<head>
<style>


.cardiv{
height:200px;
width:100px;
background-color:red;
position:relative;
text-align:center;
overflow:hidden;
}
.moreinfo{
height:0%;
transition: height 0.5s;
opacity:1;
position: absolute;
bottom:0px;
background-color:blue;
}


.cardiv:hover .moreinfo{


opacity: 1;
height:100px;
}
</style>
</head>
<body>


<div class="cardiv">
<div class="moreinfo">Hello I am inside div</div>
</div>


</body>
</html>

小开

在 CSS 中使用 forwards填充模式使其保持在动画的最后一部分。

我建议使用 transform: tranlsateY(-20px);而不是使用 css 位置，但如果你坚持使用它，然后设置 .dummy-wrap位置到 absolute

.dummy-wrap {
animation: slideup 2s forwards;
-moz-animation: slideup 2s forwards;
-webkit-animation: slideup 2s forwards;
-o-animation: slideup 2s forwards;
position: absolute;
}


@keyframes slideup {
0% {
top: 0px;
}
75% {
top: 0px;
}
100% {
top: -20px;
}
}

<div class="dummy-wrap">
<div class="success-wrap successfully-saved">Saved</div>
</div>