Hey guys,

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:

HTML Code:
<ul id='followus'>
     <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>
</ul>
Code:
#fb p{
	background: url('../images/social.png') 0px 31px;
	width: 32px;
	height: 31px;
}

#fb p:hover{
	-webkit-animation: myfirst 1s;
		border: 1px solid red;
}

@keyframes myfirst
{
0%   {top:20px;}
100% {top:50px;}
}
I am using an image sprite which includes both the grey and colored version.

Can you give me some tips on how to get my animation going?