使用CSS顯示div內容後淡出

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

您可以使用animationexample。

將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動畫關鍵幀）：

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

Answer 3

使用CSS3關鍵幀動畫：

我已經包含了-webkit-前綴，但是您需要在animation和上添加-moz,-ms和 .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;} 
 
}

<div class="error-message"> 
 
    <p>Some random text</p> 
 
</div>