Auto hide Message-box after 5 seconds only Css | Without js
<html lang="en">
<head>
<title>Codekarnedo.com | Hide Div Using Css</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div>
<div id='container'>
<div id='hideMe'>
<h1>Auto hide Message-box after 5 seconds only Css | Without js</h1>
</div>
</div>
</div>
</body>
</html>
The .message-box starts with an opacity: 1 (fully visible).
The CSS animation fadeOut is applied, where:
- It stays fully visible (
opacity: 1) until 80% of the time. - Then it gradually fades out from 80% to 100% over the last part of the animation.
The animation: fadeOut 5s forwards; runs the animation over 5 seconds, and forwards ensures the final state (opacity 0) is maintained.
#hideMe {-webkit-animation: cssAnimation 3s forwards;
animation: cssAnimation 3s forwards;background: #ff5f7f;padding: 10px 10px;text-align: center;}
@keyframes cssAnimation {
0% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
@-webkit-keyframes cssAnimation {
0% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
empty
Comments (0 )
Leave A Comment