Html 使用 CSS 显示 div 内容后淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21388402/
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
Fade out after div content has been shown using CSS
提问by KC Chai
I'm trying to show a notification on button click. The button click actually checks for email validation. I know to show a div with content with the error message. However, I would like to fade out the error message, lets say after 5 seconds . I would like to achieve it using CSS. Below is my attempt, it just hides everything. Please advise.
我正在尝试在单击按钮时显示通知。单击按钮实际上检查电子邮件验证。我知道要显示带有错误消息内容的 div。但是，我想淡出错误消息，让我们说 5 秒后。我想使用 CSS 来实现它。下面是我的尝试，它只是隐藏了一切。请指教。
#signup-response{
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #FF0000;
margin-top: 20px;
-webkit-transition: opacity 5s ease-in-out;
-moz-transition: opacity 35s ease-in-out;
-ms-transition: opacity 5s ease-in-out;
-o-transition: opacity 5s ease-in-out;
opacity: 0;
}
回答by Itay Gal
You can use animationexample.
您可以使用animation示例。
Set the animation-delayto the time you want. Make sure you use animation-fill-mode: forwardsto stop the animation.
将animation-delay时间设置为您想要的时间。确保使用animation-fill-mode: forwards来停止动画。
#signup-response{
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #FF0000;
margin-top: 20px;
animation:signup-response 0.5s 1;
-webkit-animation:signup-response 0.5s 1;
animation-fill-mode: forwards;
animation-delay:2s;
-webkit-animation-delay:1s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
}
@keyframes signup-response{
from {opacity :1;}
to {opacity :0;}
}
@-webkit-keyframes signup-response{
from {opacity :1;}
to {opacity :0;}
}
回答by brouxhaha
Using css3 keyframe animation:
使用css3关键帧动画：
(You'll probably want to add -webkit--moz-, -ms-, and -o-prefixes on the animationand animation-delayproperties inside .error-messageand on the keyframesto support older browsers.)
（您可能希望在和属性内部和 上添加-webkit--moz-、-ms-和-o-前缀以支持旧浏览器。）animationanimation-delay.error-messagekeyframes
.error-message {
animation: fadeOut 2s forwards;
animation-delay: 5s;
background: red;
color: white;
padding: 10px;
text-align: center;
}
@keyframes fadeOut {
from {opacity: 1;}
to {opacity: 0;}
}<div class="error-message">
<p>Some random text</p>
</div>回答by LarsEngeln
cross browser hack (instead of using css3 animation keyframes):
跨浏览器 hack（而不是使用 css3 动画关键帧）：
transition-timing-function: cubic-bezier(1,1,1.0,0);}
-webkit-transition-timing-function: cubic-bezier(1,1,1.0,0);
http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp
http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp
