Auto hide Message-box after 5 seconds only Css | Without js

Auto hide Message-box after 5 seconds only Css | Without js

Suraj (UI/UX Developer)
Sep 2024

Auto Hide Message Box After 5 Seconds Using Only CSS (Without JavaScript)

Introduction

In modern web design, showing temporary notifications like success messages, alerts, or info boxes improves user experience. Most developers rely on JavaScript for this task, but what if you want a lightweight solution using only CSS?

In this blog, you’ll learn how to auto hide a message box after 5 seconds using pure CSS, without writing a single line of JavaScript. This approach is perfect for simple UI alerts, form success messages, or static websites.

Why Use CSS Instead of JavaScript?

Using only CSS has several advantages:

Faster page loading

No dependency on JavaScript

Cleaner and simpler code

Works even when JS is disabled

Ideal for static pages and basic notifications

How CSS Auto Hide Works

CSS animations allow elements to change properties over time. By combining:

animation

opacity

visibility

animation-delay

Limitations of CSS-Only Approach

While CSS works great for basic use cases, keep in mind:

Cannot reset or replay without page reload

No conditional logic

Not suitable for complex interactions

For advanced control, JavaScript is still recommended.

Conclusion

Auto hiding a message box after 5 seconds without JavaScript is completely possible using pure CSS animations. This method is simple, efficient, and perfect for lightweight UI notifications.

If you’re building a static site or want to reduce JavaScript usage, this CSS-only solution is a smart choice.

Read More
HTML 
<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>
 
CSS 
#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;}
}