Notification List using CSS3

The List contains a number of connected items consecutively, typically one below the other.

In this tutorial We are going to explain about adding of animation while notification. Also discussed about different types of animation according to various positions like sidebar list and notification list. At this moment you may ask, “Why animation is required for notifications?”. To answer your question, if you are planning to implement lists in your websites in positions like navigation list or sidebar list, by animation we can improve user interaction for a webpage. So that user will notice what is happening in a page if some actions are done. This will increase the user attention to convey from where the list is getting arrived.

In below boxes just click the buttons to see how lists are displayed with and without animation. So that you may feel the difference of having animations while displaying list items.

We hope, you understand the purpose of having animations while sorting list items. Now let us see how to add different types of animations for a list.

HTML Markup

By default, I have added no-animation class in UL to display notifications without animations.

  • list 1
  • list 2
  • list 3

CSS

li{
text-align: center;
border: 1px solid #ccc;
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.5);
padding: 5px 10px; width: 300px;
margin: 5px auto;
}

Animation 1: Sliding from left

This type of animation can be added for sidebars notifications of a webpage. When a page is loaded or when an action is performed to display a list we can use this animation.

Initially all list placed at -130% translated to left (i.e) translatex(-130%). Once clicking animate button, show class added to the UL and translate to 0.

.slide-animation li{
transform: translateX(-130%);
transition: 0.4s all ease;
}

.slide-animation.show li{
transform: translateX(0%);
}

For this I prefer ease animation with a duration of 0.4 seconds and the list will slide from left outside to right viewport. You can notice that when clicking animate button, all the items in the list slides to viewport at once. This is one type of animation by sliding all the items at the same time.

But there is one disadvantage in this. User interaction will be there but not much. While sliding if we bring items one by one it will be more interactive than sliding at once. Okay now we will see that too.

Animation 2: Sliding from left individual

This type of animation also can be added for sidebars of a webpage. When a page is loaded or when an action is performed to display a list we can use this animation.

.one-by-one li{
transform: translateX(-130%);
transition: 0.4s all ease;
}

.one-by-one.show li{
transform: translateX(0%);
}

.one-by-one li:nth-child(1){transition-delay: 0ms;}
.one-by-one li:nth-child(2){transition-delay: 40ms;}
.one-by-one li:nth-child(3){transition-delay: 80ms;}
.one-by-one li:nth-child(4){transition-delay: 120ms;}

For this animation also I prefer ease animation like first one. But added a small delay between list items. You can notice that when clicking animate button, the items in list slides from outside left to viewport one by one with a small delay.

In this animation we can bring more user interaction than the first one. Since while sliding one by one itself user will finish reading the list items one by one. This will increase the readability of users and will be more comfortable.

Now let us see animation for notification list in the next two demos.

Animation 3: Sliding from top

This type of animation can be used for notification lists. If we got any notification, we will swipe our window from top and a list of notification will appear. While showing list items if we add some animation it will bring more convenience.

.top-translate li{
transform: translateY(-10%);
transition: 0.4s all ease;
}

.top-translate.show li{
transform: translateY(0%);
}

.top-translate li:nth-child(1){transition-delay: 0ms;}
.top-translate li:nth-child(2){transition-delay: 40ms;}
.top-translate li:nth-child(3){transition-delay: 80ms;}
.top-translate li:nth-child(4){transition-delay: 120ms;}

In this animation list items slides from top(translateY). You can notice that when clicking animate button, the items started sliding as a group from top and moved downwards. Once the item reaches its position it will stop sliding and remaining items will slide further.

Such type of animation will bring more user interaction than without animation.

Animation 4: Sliding from top with scaling

This type of animation also can be used for notification lists. If we got any notification, we will swipe our window from top and a list of notification will appear. While showing list items if we add some animation it will bring more convenience.

This animation also similar to previous one but with additional scaling property.
.top-scaleli{
transform: translateY(-10%) scale(0,0);
transition: 0.4s all ease;
}

.top-scale.show li{
transform: translateY(0%) scale(1,1);
}

.top-scaleli:nth-child(1){transition-delay: 0ms;}
.top-scaleli:nth-child(2){transition-delay: 40ms;}
.top-scaleli:nth-child(3){transition-delay: 80ms;}
.top-scaleli:nth-child(4){transition-delay: 120ms;}

In this animation also list items slides from top. You can notice that when clicking animate button, the items started sliding as a group from top and moved downwards. With additional scaling property it works like items are scaled small size while starting from top and growing as big when moving downwards. Once the item reaches its position it will be at maximum size and remaining items will slide further

As told earlier, first two animations are used for sidebar lists and next two animations are used for notification lists. Hope you enjoy this post. 🙂

You may also like