I have seen on many website's footer,they have some social links which on hover animates to left and again shifts to original position and i was like wooww!! thats really cool!But being a beginner i had no clue how to achieve the animation,i only knew it must be some jquery stuff ,then suddenly one day CSS3 webkit hit my mind so i decided to do RnD so i came across a name "Nudge Effect" ofcourse Googled and then i realized it was very easy just simple coding now i can animate Left,Right,Upward,Downward and some other cool stuff i have displayed below go on Hover Your Mouse and Check out..
CSS3 Link Nudge Effect
Facebook
//CSS3 NUDGE EFFECT SOURCE CODE
<style>
a
{
color:black;
}
#animateList li a {
cursor: pointer;
-webkit-transition: padding-left 250ms ease-out;
-moz-transition: padding-left 250ms ease-out;
/* trans pattern: property duration timingMethod delay */
}
#animateList li a:hover {
padding-left: 9px;
}
</style>
<body>
<ul id="animateList">
<li><a href="#"><img src="1.png">Mail Us</a>
<li><a href="#"><img src="2.png">Facebook</a>
<li><a href="#"><img src="5.png">Twitter</a>
<li><a href="#"><img src="4.png">RSS Feed</a></ul>
</body> CSS3 Transform Effect
\\CSS3 LINK EFFECT
<style>
.cpojer-links a {
display: inline-block;
padding: 4px;
outline: 0;
color: #3a599d;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
-webkit-transform: scale(1) rotate(0);
-moz-transform: scale(1) rotate(0);
-o-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
.cpojer-links a:hover {
background: #3a599d;
text-decoration: none;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transform: scale(1.05) rotate(-1deg);
-moz-transform: scale(1.05) rotate(-1deg);
-o-transform: scale(1.05) rotate(-1deg);
transform: scale(1.05) rotate(-1deg);
}
.cpojer-links a:nth-child(2n):hover {
-webkit-transform: scale(1.05) rotate(1deg);
-moz-transform: scale(1.05) rotate(1deg);
-o-transform: scale(1.05) rotate(1deg);
transform: scale(1.05) rotate(1deg);
}
</style>
<ul class="cpojer-links">
<li><a href="#">SDAFSADFSDAF</a>
<li><a href="#">SDAFSADFSDAF</a>
<li><a href="#">SDAFSADFSDAF</a>
<li><a href="#">SDAFSADFSDAF</a>
</ul> Looking for spin animation,I have created a simple tutorial on it too..CSS3 social Icons Spin Animations
