CSS CSS3 过渡 - 淡出效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15907079/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 Transition - Fade out effect
提问by karthikr
I am trying to implement the "fade out" effect in pure CSS. Here is the fiddle. I did look into a couple of solutions online, however, after reading the documentation online, I am trying to figure out why the slide animation would not work. Any pointers?
我正在尝试在纯 CSS 中实现“淡出”效果。这是小提琴。我确实在网上研究了几个解决方案，但是，在阅读了在线文档后，我试图弄清楚为什么幻灯片动画不起作用。任何指针？
.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>回答by immayankmodi
Here is the another way to do same.
这是执行相同操作的另一种方法。
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;
}
UPDATE 1:I found more up-to-date tutorial CSS3 Transition: fadeIn and fadeOut like effects to hide show elementsand Tooltip Example: Show Hide Hint or Help Text using CSS3 Transitionhere with sample code.
UPDATE 1:我找到了更多最新教程CSS3 过渡：fadeIn 和fadeOut 之类的效果来隐藏显示元素和工具提示示例：使用 CSS3 过渡在这里显示隐藏提示或帮助文本和示例代码。
UPDATE 2:(Added details requested by @big-money)
UPDATE 2:（添加@big-money 要求的详细信息）
When showing the element (by switching to the visible class), we want the visibility:visible to kick in instantly, so it's ok to transition only the opacity property. And when hiding the element (by switching to the hidden class), we want to delay the visibility:hidden declaration, so that we can see the fade-out transition first. We're doing this by declaring a transition on the visibility property, with a 0s duration and a delay. You can see detailed article here.
当显示元素时（通过切换到可见类），我们希望可见性：可见立即启动，所以可以只转换不透明度属性。并且在隐藏元素时（通过切换到隐藏类），我们希望延迟可见性：隐藏声明，以便我们可以首先看到淡出过渡。我们通过在可见性属性上声明一个过渡来做到这一点，持续时间为 0 秒，延迟时间为 0 秒。你可以在这里看到详细的文章。
I know i am too late to answer but posting this answer to save others time. Hope it helps you!!
我知道我回答得太晚了，但发布此答案是为了节省其他人的时间。希望对你有帮助！！
回答by karthikr
You can use transitions instead:
您可以改用过渡：
.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;
}
回答by Rui Wang
Since displayis not one of the animatable CSS properties.
One display:nonefadeOut animation replacement with pure CSS3 animations, just set width:0and height:0at last frame, and use animation-fill-mode: forwardsto keep width:0and height:0properties.
因为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;
}
回答by adrift
You forgot to add a position property to the .dummy-wrapclass, and the top/left/bottom/right values don't apply to statically positioned elements (the default)
您忘记向类添加位置属性.dummy-wrap，并且顶部/左侧/底部/右侧值不适用于静态定位的元素（默认）
回答by adrift
.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;
}
回答by Vishal Biradar
This is the working code for your question.
Enjoy Coding....
这是您问题的工作代码。
享受编码......
<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>
