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;
}
Using css3 keyframe animation:
(You'll probably want to add -webkit-
-moz-
, -ms-
, and -o-
prefixes on the animation
and animation-delay
properties inside .error-message
and on the keyframes
to support older browsers.)
.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>
You can use animation
example.
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;}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With