This tutorial is aimed to show you some very common CSS transitions used in development. I chose to illustrate this on notifications because i can use the both hidden and visible states of elements to display a broad range of animations.
The animations where created originally by Daniel Eden.
There are 4 types of notifications i have used: Top, Center, Bottom Center, Bottom Right.
This tutorial will only work on browsers that supports the most recent CSS3 features and this tutorial is not ready for production.
HTML
Everything will stay inside "notifications" element.
<div id="notifications"></div>
"notifications-window" is the element that hold the two drop downs, the position of the notification and the effects used. Because there are many effects i won't include them all here but you will find them in the demo or download.
<div id="notifications-window">
<div class="notifications-window-row" style="margin-top:85px;">
<select class="dropdown" id="position">
<option value="top">Top</option>
<option value="center">Center</option>
<option value="bottom">Bottom Center</option>
<option value="botom_right">Bottom Right</option>
</select>
</div>
<div class="notifications-window-row">
<select class="dropdown" id="effects">
<optgroup label="Attention Seekers">
<option value="bounce">bounce</option>
<option value="flash">flash</option>
<option value="pulse">pulse</option>
<option value="rubberBand">rubberBand</option>
<option value="shake">shake</option>
<option value="swing">swing</option>
<option value="tada">tada</option>
<option value="wobble">wobble</option>
</optgroup>
<optgroup label="Bouncing Entrances">
<option value="bounceIn">bounceIn</option>
<option value="bounceInDown">bounceInDown</option>
<option value="bounceInLeft">bounceInLeft</option>
<option value="bounceInRight">bounceInRight</option>
<option value="bounceInUp">bounceInUp</option>
</optgroup>
<optgroup label="Bouncing Exits">
<option value="bounceOut">bounceOut</option>
<option value="bounceOutDown">bounceOutDown</option>
<option value="bounceOutLeft">bounceOutLeft</option>
<option value="bounceOutRight">bounceOutRight</option>
<option value="bounceOutUp">bounceOutUp</option>
</optgroup>
<optgroup label="Zoom Exits">
<option value="zoomOut">zoomOut</option>
<option value="zoomOutDown">zoomOutDown</option>
<option value="zoomOutLeft">zoomOutLeft</option>
<option value="zoomOutRight">zoomOutRight</option>
<option value="zoomOutUp">zoomOutUp</option>
</optgroup>
</select></div>
<div class="notifications-window-row" style="margin-top:60px;">
<div id="notifications-window-row-button">Submit</div>
</div>
</div>The top element will not be shown in the demo HTML but it will be available in the JavaScript as a variable and it will be inserted when the "Top" option is selected.
<div id="notifications-top-center">
<span class="iconb" data-icon=""></span>
Oups something went wrong !
<div id="notifications-top-center-close" class="close">
<span class="iconb" data-icon=""></span>
</div></div>The same can be said for Center, Bottom Center and Bottom Right notifications. They will not show up in HTML but they will be appended using jquery.
<div id="notifications-full">
<div id="notifications-full-close" class="close"><span class="iconb" data-icon=""></span></div>
<div id="notifications-full-icon"><span class="iconb" data-icon=""></span></div>
<div id="notifications-full-text">
This is a large notification. You can use this notification to display long warnings. This type of notification is not suited for short warnings. As an added bonus you have a big icon at the top.</div>
</div>
<div id="notifications-bottom-center-tab">
<div id="notifications-bottom-center-tab-close" class="close"><span class="iconb" data-icon=""></span></div>
<div id="notifications-bottom-center-tab-avatar"><img src="_assets/avatar.png" width="100" height="100" /></div>
<div id="notifications-bottom-center-tab-right">
<div id="notifications-bottom-center-tab-right-title"><span>George</span> sent you a message</div>
<div id="notifications-bottom-center-tab-right-text">This is a sample notification that will appear centered in the bottom .</div>
</div>
</div>
<div id="notifications-bottom-right-tab">
<div id="notifications-bottom-right-tab-close" class="close"><span class="iconb" data-icon=""></span></div>
<div id="notifications-bottom-right-tab-avatar"><img src="_assets/avatar.png" width="70" height="70" /></div>
<div id="notifications-bottom-right-tab-right">
<div id="notifications-bottom-right-tab-right-title"><span>George</span> sent you a message</div>
<div id="notifications-bottom-right-tab-right-text">This is a sample notification that will appear the right bottom corner.</div>
</div>
</div>CSS
There are two main CSS files linked in the document. The first one is animate.css which stores the actual animation classes. The second CSS file attached is animated-notifications.css, this contains the CSS code for this tutorial. If you only want to use a particular effect you will have to go and find the CSS class with the name of the desired effect inside animate.css. In order for the notifications to properly be aligned. I have created a separate div to hold the background and it will freely float inside “notifications” div which is the master div element.
#notifications {
float: left;
width: 100%;
overflow: hidden;
height: 100%;
position: relative;
}
#notifications-background {
float: left;
width: 100%;
}
The two select drop downs and the select button are hosted inside “#notifications-window”. The position of this div is absolute and is centered using the absolute position with 50% from left and the left margin set to -352px because the total div width is 700px + (2 x 2px ) because of the borders on each side. Regarding the rest of the css styles for this sections i am going to leave you at this because there is nothing special and i don’t want to bother you. So let’s move on to bigger and better things.
#notifications-window {
height: 400px;
width: 700px;
border: 2px solid #FFF;
position: absolute;
left: 50%;
top: 20%;
margin-left: -352px;
}
.notifications-window-row {
float: left;
width: 100%;
height: 44px;
margin-top: 30px;
}
.dropdown {
height: 40px;
width: 300px;
background-color: rgba(63,141,191,1);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
float: left;
margin-left: 198px;
font-size: 16px;
font-weight: 600;
outline: none;
color: rgba(255,255,255,1);
position: relative;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#notifications-window-row-button{
width: 304px;
margin-right: auto;
margin-left: auto;
height: 44px;
background-color: rgba(233,30,99,0.8);
text-align: center;
font-size: 18px;
color: rgba(255,255,255,1);
font-weight: 600;
line-height: 44px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
#notifications-window-row-button:hover {
background-color: rgba(233,30,99,1);
cursor: pointer;
}The same goes for the rest of the CSS, nothing special here just the fact that all notifications div elements have the position set to absolute.
#notifications-bottom-right {
position: absolute;
width: 360px;
right: 20px;
bottom: 20px;
}
#notifications-bottom-right-tab{
background-color: rgba(255,255,255,1);
float: left;
height: 100px;
width: 360px;
margin-top: 20px;
position: relative;
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
#notifications-bottom-right-tab-close{
height: 20px;
width: 20px;
position: absolute;
top: 40px;
right: 20px;
color: #cccccc;
font-size: 18px;
line-height: 20px;
text-align: center;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
#notifications-bottom-right-tab-close:hover {
color: rgba(102,102,102,1);
cursor: pointer;
}
#notifications-bottom-right-tab-avatar{
float: left;
height: 100px;
width: 70px;
margin-left: 20px;
}
#notifications-bottom-right-tab-avatar img{
-moz-border-radius: 50% 50% 50% 50%;
-webkit-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
-khtml-border-radius: 50% 50% 50% 50%;
float: left;
margin-top: 15px;
}
#notifications-bottom-right-tab-right{
float: left;
width: 210px;
margin-left: 20px;
margin-top: 20px;
}
#notifications-bottom-right-tab-right-title{
float: left;
width: 100%;
color: #252525;
font-weight: 600;
}
#notifications-bottom-right-tab-right-title span{
color: #e91e63;
}
#notifications-bottom-right-tab-right-text{
float: left;
width: 100%;
font-size: 14px;
color: #4c4c4c;
font-style: italic;
margin-top: 5px;
}
#notifications-bottom-center{
position: absolute;
width: 360px;
bottom: 90px;
left: 50%;
margin-left: -180px;
}
#notifications-bottom-center-tab{
background-color: rgba(255,255,255,1);
float: left;
height: 100px;
width: 360px;
margin-top: 20px;
position: relative;
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
#notifications-bottom-center-tab-close{
height: 20px;
width: 20px;
position: absolute;
top: 40px;
right: 20px;
color: #cccccc;
font-size: 18px;
line-height: 20px;
text-align: center;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
#notifications-bottom-center-tab-close:hover {
color: rgba(102,102,102,1);
cursor: pointer;
}
#notifications-bottom-center-tab-avatar{
float: left;
height: 100px;
width: 100px;
}
#notifications-bottom-center-tab-avatar img{
float: left;
}
#notifications-bottom-center-tab-right{
float: left;
width: 210px;
margin-left: 20px;
margin-top: 20px;
}
#notifications-bottom-center-tab-right-title{
float: left;
width: 100%;
color: #252525;
font-weight: 600;
}
#notifications-bottom-center-tab-right-title span{
color: #e91e63;
}
#notifications-bottom-center-tab-right-text{
float: left;
width: 100%;
font-size: 14px;
color: #4c4c4c;
font-style: italic;
margin-top: 5px;
}
#notifications-top-center {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
background-color: rgba(255,255,255,1);
height: 50px;
text-align: center;
line-height: 50px;
color: #404040;
font-size: 18px;
font-weight: 600;
}
#notifications-top-center-close {
background-color: rgba(233,30,99,0.6);
float: right;
height: 50px;
width: 50px;
font-size: 30px;
color: rgba(255,255,255,1);
font-weight: 400;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
#notifications-top-center-close:hover {
cursor: pointer;
background-color: rgba(233,30,99,1);
}
#notifications-full{
-moz-box-shadow: 0px 0px 50px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 0px 50px rgba(0,0,0,0.1);
box-shadow: 0px 0px 50px rgba(0,0,0,0.1);
height: 300px;
width: 530px;
background-color: rgba(255,255,255,1);
position: fixed;
margin-top: 10%;
margin-left: -265px;
z-index: 2;
left: 50%;
top: 10%;
}
#notifications-full-close{
height: 20px;
width: 20px;
position: absolute;
top: 10px;
right: 10px;
color: #cccccc;
font-size: 20px;
line-height: 20px;
text-align: center;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
#notifications-full-close:hover {
color: rgba(102,102,102,1);
cursor: pointer;
}
#notifications-full-icon{
float: left;
width: 100%;
font-size: 65px;
text-align: center;
height: 65px;
margin-top: 35px;
color: #404040;
}
#notifications-full-text{
width: 430px;
float: left;
margin-left: 50px;
text-align: center;
margin-top: 40px;
font-size: 16px;
line-height: 24px;
color: #404040;
}
JavaScript
For the #notifications to be the size of the browser window all the time and not smaller or bigger I have created a resize function that will be activated when the page is loaded and when the window is resized.
function resize(){
$('#notifications').height(window.innerHeight - 50);
}
$( window ).resize(function() {resize();});
resize();Next we have to create a universal function that will be applied each time the close button is clicked.
function refresh_close(){
$('.close').click(function(){$(this).parent().fadeOut(200);});
}
refresh_close();The HTML for each notification is written inside each variable that corresponds to each notification.
var top = '<div id="notifications-top-center"><span class="iconb" data-icon=""></span> Oups something went wrong !<div id="notifications-top-center-close" class="close"><span class="iconb" data-icon=""></span></div></div>';
var center = '<div id="notifications-full"><div id="notifications-full-close" class="close"><span class="iconb" data-icon=""></span></div><div id="notifications-full-icon"><span class="iconb" data-icon=""></span></div><div id="notifications-full-text">This is a large notification. You can use this notification to display long warnings. This type of notification is not suited for short warnings. As an added bonus you have a big icon at the top.</div></div>';
var bottom = '<div id="notifications-bottom-center-tab"><div id="notifications-bottom-center-tab-close" class="close"><span class="iconb" data-icon=""></span></div><div id="notifications-bottom-center-tab-avatar"><img src="_assets/avatar.png" width="100" height="100" /></div><div id="notifications-bottom-center-tab-right"><div id="notifications-bottom-center-tab-right-title"><span>George</span> sent you a message</div><div id="notifications-bottom-center-tab-right-text">This is a sample notification that <br> will appear centered in the bottom .</div></div></div>';
var bottom_center = '<div id="notifications-bottom-right-tab"><div id="notifications-bottom-right-tab-close" class="close"><span class="iconb" data-icon=""></span></div><div id="notifications-bottom-right-tab-avatar"><img src="_assets/avatar.png" width="70" height="70" /></div><div id="notifications-bottom-right-tab-right"><div id="notifications-bottom-right-tab-right-title"><span>George</span> sent you a message</div><div id="notifications-bottom-right-tab-right-text">This is a sample notification that <br> will appear the right bottom corner.</div></div></div>';The last thing we have to do is to insert each notification when the appropriate effect is selected. All if statements will become active only when the “#notifications-window-row-button” is clicked. After the submit button is clicked depending on which position has been chosen, the appropriate statement will be activated. If the ‘top’ position is selected we will see this by checking the value inside the select field. We always have to remove the old content before proceeding to append the new content. I say new content because depending on which effect is selected we will have to add the appropriate class, by doing this we change the html content so we can say there is a new and an old content. The notification is inserted together with the appropriate animation class. After adding the class the only thing left to do is summoning the refresh_close() class once again so that the close button for each notification will work with the new content. The top and center notification work by appending the HTML inside the master div “#notifications” meanwhile the bottom and bottom right notifications work by changing the content inside “#notifications-bottom-center” and “#notifications-bottom-right”, big difference here.
$('#notifications-window-row-button').click(function(){
if($('#position').val()=='top'){
$("#notifications-top-center").remove();
$("#notifications").append(top);
$("#notifications-top-center").addClass('animated ' + $('#effects').val());
refresh_close();
}
if($('#position').val()=='center'){
$("#notifications-full").remove();
$("#notifications").append(center);
$("#notifications-full").addClass('animated ' + $('#effects').val());
refresh_close();
}
if($('#position').val()=='bottom'){
$("#notifications-bottom-center").html();
$("#notifications-bottom-center").html(bottom);
$("#notifications-bottom-center-tab").addClass('animated ' + $('#effects').val());
refresh_close();
}
if($('#position').val()=='botom_right'){
$("#notifications-bottom-right").html();
$("#notifications-bottom-right").html(bottom_center);
$("#notifications-bottom-right-tab").addClass('animated ' + $('#effects').val());
refresh_close();
}
});
});
