使用CSS显示div内容后淡出 [英] Fade out after div content has been shown using CSS

问题描述

我想在按钮点击时显示通知。按钮单击实际检查电子邮件验证。我知道要显示一个内容与错误消息的div。但是，我想淡出的错误信息，让我们说5秒后。我想用CSS实现它。下面是我的尝试，它只是隐藏一切。请指教。

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.

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

推荐答案

$ c>动画 示例 。

You can use animation example.

将 animation-delay 设置为所需的时间。请确保您使用 animation-fill-mode：forward 停止动画。

Set the animation-delay to the time you want. Make sure you use animation-fill-mode: forwards to stop the animation.

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

这篇关于使用CSS显示div内容后淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！