Question

我正在尝试按下按钮时显示通知。按钮单击实际上检查电子邮件验证。我知道要显示包含错误消息内容的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;
}

Answer 1

您可以使用animation example 。

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

Answer 2

使用css3关键帧动画：

我已添加-webkit-前缀，但您需要在-moz和{{1}上添加-ms，-o和animation } animation-delay内和.error-message上的属性。

keyframes

.error-message {
    -webkit-animation: fadeOut 2s forwards;
    animation: fadeOut 2s forwards;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
    background: red;
    color: white;
    padding: 10px;
    text-align: center;
}

@-webkit-keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

Answer 3

跨浏览器黑客（而不是使用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

使用CSS显示div内容后淡出

3 个答案: