Notification List using CSS3 - Download Demo

Without animation

Sliding from left

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.

sliding from left one by one

For this animation also I prefer ease animation like first one. But added a small delay 400ms 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.

Sliding from top

In this animation 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. Once the item reaches its position it will stop sliding and remaining items will slide further.

Sliding from top with scaling

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