Timed Notifications with CSS Animations

A quick tip on how to create some simple timed notifications with CSS animations. The idea is to show a notification with a progress bar for a specific duration and then make it disappear.
Timed Notifications with CSS Animations

From our monthly sponsor: monday.com is the last team management and design process tool you’ll ever need. Start your free trial.Advertisement

In today’s tip we’ll show you how to create a simple timed notification with CSS animations. The idea is to show a notification or alert for a specific duration and then make it disappear. We’ll use a little progress indicator to show how much time is left before the box disappears.

You definitely saw it already somewhere, I discovered it on buysellads.com where timed notifications are shown i.e. after saving some settings.

For the markup we’ll simply have a division with a message inside and with an additional division for the little progress bar:

<div class="tn-box tn-box-color-1">
	<p>Your settings have been saved successfully!</p>
	<div class="tn-progress"></div>
</div>

The notification box is going to have the classes tn-box and tn-box-color-1 which will be used for defining different colors.

Then we define the style of the box:

.tn-box {
	width: 360px;
	position: relative;
	margin: 0 auto 20px auto;
	padding: 25px 15px;
	text-align: left;
	border-radius: 5px;
    box-shadow: 
		0 1px 1px rgba(0,0,0,0.1), 
		inset 0 1px 0 rgba(255,255,255,0.6);  
	opacity: 0;
	cursor: default;
	display: none;
}

.tn-box-color-1{
	background: #ffe691;
	border: 1px solid #f6db7b;
}

We’ll set the box to display: none and give it 0 opacity.

The progress bar will have the following style:

.tn-progress {
	width: 0;
	height: 4px;
	background: rgba(255,255,255,0.3);
	position: absolute;
	bottom: 5px;
	left: 2%;
	border-radius: 3px;
	box-shadow: 
		inset 0 1px 1px rgba(0,0,0,0.05), 
		0 -1px 0 rgba(255,255,255,0.6);
}

Initially, the bar will have 0 width.

In this example, I’m using a button with a checkbox that will start the animations once it’s checked:


input.fire-check:checked ~ section .tn-box {
	display: block;
	animation: fadeOut 5s linear forwards;
}

input.fire-check:checked ~ section .tn-box .tn-progress {
	animation: runProgress 4s linear forwards 0.5s;
}

The button precedes the section with the notification boxes and so I can use the general sibling combinator.

If you maybe want to add a class with JavaScript instead, you could define something like this:


.tn-box.tn-box-active {
	display: block;
	animation: fadeOut 5s linear forwards;
}

.tn-box.tn-box-active .tn-progress {
	animation: runProgress 4s linear forwards 0.5s;
}

where tn-box-active is the class you add to the tn-box div.


The animation for the box itself is the following:

@keyframes fadeOut {
	0% 	{ opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; transform: translateY(0px);}
	99% { opacity: 0; transform: translateY(-30px);}
	100% { opacity: 0; }
}

I called it “fadeOut” but it actually fades the box in first and then it makes it fade out and move up a bit.

The animation for the progress bar looks like this:

@keyframes runProgress {
	0%	{ width: 0%; background: rgba(255,255,255,0.3); }
	100% { width: 96%; background: rgba(255,255,255,1); }
}

We animate the width to 96% (left was 2% so we want it to stop 2% from the right as well) and the opacity of the RGBA value.
The duration of the progress bar animation will be a bit less than the duration of the box animation, since we will start it later (the box needs to fade in first).

Note: What I thought would be nice, is a pausing of the animation on hover. This makes sense if the user wants to take more time to read what the notification says. But unfortunately, there seems to be some issues with WebKit broswers. In Chrome (19.0.1084.56 on Win) the animation breaks while in Safari (5.1.5 Win) I get a crash report on WebKit2WebProcess.exe… It works perfectly fine in Firefox > 12.0.

Anyway, here is how you could do it:

.tn-box.tn-box-hoverpause:hover, 
.tn-box.tn-box-hoverpause:hover .tn-progress{
	animation-play-state: paused;
}

Needless to say, this will only work in browsers that support CSS animations! You’ll need some kind of JS fallback for other browsers.

And that’s all! I hope you find it useful!

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 38

Comments are closed.
  1. Simply great and just what I was looking for and works perfect in Chrome. Any recommendations for a JS fallback?

  2. Nice! This part was really elegant:

    input.fire-check:checked ~ section

    However, triggering the animations from a non-sibling element requires the tiny bit of javascript.

  3. This is very cool. I like the look&feel of the notifications. The only weak point I see is that the markup for the notifications has to be on the same DOM level as the INPUT tag.

    Why haven’t you made a GitHub repository to develope further the idea? I think it could do for a very interesting plugin, which some support in Javascript. It would definitely be on my “watched” repositories.

    In any case, mad props for the idea.

  4. Thanks for the great feedback! @Monk @Enrique Of course, the input should NOT be used to trigger this 🙂 I’m just using this for the demo. Instead, you could add a class with JS that triggers the animation (see the .tn-box-active example). Thanks, cheers, ML

  5. Very nice idea, I like it a lot. Did you try to ‘invert’ the loading bar so that it starts at its full size and then slowly gets smaller? From a ux point of view this might seem more like a timer running out instead of something loading.

  6. Very cool idea. I will read your tut again since my coding is not as good as yours

  7. Enrique/Mary, I feel a bit noobish asking, but could you provide some exposition on why this example’s setup, from a DOM and best practices perspective, is ‘bad’? Thanks.

  8. That’s really impressive, never thought of using animation for making notification appear/desappear, this opens new perspectives concerning notification in user interface. Congrats 🙂

  9. Hi Mary Lou

    I haven’t seen loading bars animations like this since flash was common place in website design. The demo you have put together is really inspiring and a bit of an eye opener. The accompanying tutorial is also easy to follow and well structured. Thanks for posting this, I will defiantly be giving it a go.

  10. To do this on page load, say for instance for instructions, would you use JS/JQuery to activate it?

    Its a really nice tutorial though, thanks 🙂

  11. Nice, happy to inspire and thank you for the credit 🙂

    I must say, however, I like your implementation for the animation better though… so there may be some cross-inspiration here for us at BSA as well 🙂

  12. I’m so glad you were inspired by BuySellAds! Thanks for sharing this, the team enjoyed it. 🙂