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 sponsor: Try Mailchimp today.

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:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

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. 🙂

  13. Is there any way you could make the notifications redirect or open a new window once the progress bar is complete and the notification disappears? Would be greatly appreciated if you could, thanks heaps.

  14. @Travis

    CSS animations can not redirect/open windows. Would be only possible to do with some JS.

  15. hi thanks for this nice css3 notifications i was implement this on my website but can having some problem can you tell me how i can display notifications without clicking the button as i can figure it out …i am displaying user message as they update there info .

  16. First of all this is great but I’ve got two questions.

    I don’t get this siblings thing so how can I get it to work onLoad? I really have no idea what to put to onLoad part.

    And second thing. I want to make this notification dissappear after ‘loading’ but display: block is leaving blank space on the page. Any idea what to do to make this inline and a block? Again siblings are just surpassing my little brain. I’m looking at the actions connected to the button(checkbox) but have no idea what to do 😀

    If anybody could help would be great, cause this thing would help me a lot with few of my websites.

    • So I’ve got it 😀

      First of all turning off the connection between button and the notification:
      In style.css (section Fire the animations) remove both

      input.fire-check:checked ~ section

      Now after reload all three boxes should be visible on load.

      Now to make it disappear completely (without leaving the empty space) do this:
      First of all you have to add id (for example ‘vanish’) to the div on the page.

      Next, in the head section of the page add this:

      setTimeout(function(){
      $(‘#vanish’).remove();
      }, 5000);

      You will need jquery library but it is free and can download in a lot of places.
      5000 is a time in ms. This example is for 5s. One thing. Depending on page you would have to set this time half or second above the main div disappearing animation.
      If you have more notifications you will have to get them unique id’s and add an appropriate line in the script.

      Nonetheless you will eventually get it working like a charm 🙂

      Hope it will help someone 🙂

  17. Can anybody help me out?
    I need the notification to redirect to a new page once the timer runs out. Maybe a separate javascript countdown that starts onclick?

    • First of all sorry if my english is too bad, im from argentina, ill try to help u.
      I Quote rospondek:

      “So I’ve got it 😀
      First of all turning off the connection between button and the notification:
      In style.css (section Fire the animations) remove both
      input.fire-check:checked ~ section
      Now after reload all three boxes should be visible on load.
      Now to make it disappear completely (without leaving the empty space) do this:
      First of all you have to add id (for example ‘vanish’) to the div on the page.
      Next, in the head section of the page add this:
      setTimeout(function(){
      $(‘#vanish’).remove();
      }, 5000);
      You will need jquery library but it is free and can download in a lot of places.
      5000 is a time in ms. This example is for 5s. One thing. Depending on page you would have to set this time half or second above the main div disappearing animation.
      If you have more notifications you will have to get them unique id’s and add an appropriate line in the script.
      Nonetheless you will eventually get it working like a charm 🙂
      Hope it will help someone :)”

      so use this:

      setTimeout(function(){
      $(‘#vanish’).remove();
      var url = “http://google.com.ar”;
      $(location).attr(‘href’,url);
      }, 5000);

      So this will redirect u after 5 seconds.