button hover effect with animation
so for the past couple of days I've been looking into the css animation and different (more complex) hover effects.
I am trying to use it on a very simple effect though - as I hover over a social icon the colored version would rise-up from the bottom.
But I am stuck. I tried anything, but without success.
Here's the code:
<li id='follow'><a href='#'>follow us</a></li>
<li id='fb'><a href='http://www.facebook.com'><p></p></a></li>
<li id='twitter'><a href='http://www.twitter.com'><p></p></a></li>
I am using an image sprite which includes both the grey and colored version.
background: url('../images/social.png') 0px 31px;
-webkit-animation: myfirst 1s;
border: 1px solid red;
Can you give me some tips on how to get my animation going?