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

View demo Download source

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!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) 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.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 38

Comments are closed.
  1. 6

    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.

  2. 7

    @Travis

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

  3. 10

    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 .

  4. 11

    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 :D

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

    • 12

      So I’ve got it :D

      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 :)

  5. 15

    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?

    • 16

      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 :D
      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.

Comments are closed.