[Bluxart]

Hello guys,I have wanted to create a simple tooltip with CSS3 using the animation, and the most important thing we will not use any scripts jQuery.
I remember that CSS3 Animations are only visible in Firefox, Safari and Chrome, for the other browser the animations not function, but you will have always the tooltip effect, so can always be used in your projects.

HTML Markup

<footer id="masterpanel">
    <ul id="mainpanel">
    <li><a href="#" class="dribble"><small>Dribble</small></a></li>
    <li><a href="#" class="forrst"><small>Forrst</small></a></li>
    <li><a href="#" class="facebook"><small>Facebook</small></a></li>
    <li><a href="#" class="twitter"><small>Twitter</small></a></li>
    <li><a href="#" class="google"><small>Google+</small></a></li>
    <li><a href="#" class="linked"><small>LinkedIn</small></a></li>
    </ul>
</footer>

CSS STYLE

body {
	background: #161616 url(pattern_40.gif) top left repeat;
	margin: 0;
	padding: 0;
	font: 12px normal Verdana, Arial, Helvetica, sans-serif;
	height: 100%;
}

#masterpanel {
	background-color:#161616;
	background: -moz-linear-gradient(top, rgba(22,22,22,.7) 0%, rgba(51,51,51,.7) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(22,22,22,.7)), color-stop(100%,rgba(51,51,51,.7)));
        background: -webkit-linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
        background: -o-linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
        background: linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2161616,endColorstr=#B2333333);
	-moz-box-shadow:0 1px 10px #00c6ff;
	-webkit-box-shadow: 0 1px 10px #00c6ff;
	box-shadow:0 1px 10px #00c6ff;
	position:fixed;
	bottom:0;
	left:0;
	z-index:999;
	width:100%;
}

#masterpanel ul {
	padding:0;
	margin:0;
	float:left;
	width:80%;
	margin:0 10%;
	list-style:none;
	font-size:1em;
}

#masterpanel ul li {
	padding:0;
	margin:0;
	float:left;
	position:relative;
	border-right:1px solid #555;
}

#masterpanel ul li:first-child { border-left:1px solid #555; }

#masterpanel ul li a {
	margin:5px;
	margin-left:20px;
	margin-right:20px;
	float:left;
	height:26px;
	width:26px;
	text-decoration:none;
	color:#333;
	position:relative;
}

a.dribble { background:url(_0050_Dribbble.png) no-repeat; width:26px;}
a.forrst 	{ background:url(_0049_Forrst.png) no-repeat; }
a.facebook      { background:url(_0048_Facebook.png) no-repeat;}
a.twitter 	{ background:url(_0046_Twitter.png) no-repeat;}
a.google 	{ background:url(google.png) no-repeat;}
a.linked	{ background:url(_0018_Linkedin.png) no-repeat;}

#masterpanel a small { 
	background:#000; 
	text-align:center; 
	width:70px; 
	padding:5px; 
	border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; 
	border-radius:3px; 
	display:none; 
	color:#fff; 
	font-size:0.8em; 
	text-indent:0;
}

#masterpanel a:hover small { 
	display:block; 
	position:absolute; 
	top:0px; 
	left:50%; 
	margin:-40px; 
	z-index:9999; 
	-moz-animation:mymove .25s linear;  
	-webkit-animation:mymove .25s linear; 
} 

@-moz-keyframes mymove {
	0%{ -moz-transform:scale(0,0); opacity:0;}
	50%{ -moz-transform:scale(1.2,1.2); opacity:0.3; }
	75%{ -moz-transform:scale(0.9,0.9); opacity:0.7;}
	100%{ -moz-transform:scale(1,1); opacity:1;}
}

@-webkit-keyframes mymove {
	0%{ -webkit-transform:scale(0,0); opacity:0;}
	50%{ -webkit-transform:scale(1.2,1.2); opacity:0.3;}
	75%{ -webkit-transform:scale(0.9,0.9); opacity:0.7;}
	100%{ -webkit-transform:scale(1,1); opacity:1;}
}

In the link below you will find the demo and also the explanation in the details! I hope you like it!
DEMO

[teodora]

hey, that`s great, thank you for sharing! I will use it

[Bluxart]

Ok, I am glad you useful!