We would like to know how to hover to slide CSS3 background sprite animation using transitions.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
a.social {<!-- www.j a v a 2 s. com-->
text-indent: -9999em
}
a.social {
float: left;
display: block;
margin: 0 4px 0;
width: 26px;
height: 26px;
display: block;
background:url("http://www.java2s.com/style/download.png");
-moz-transition: background 300ms ease-in-out;
-webkit-transition: background 300ms ease-in-out;
transition: background 300ms ease-in-out;
}
a.twitter {
background-position: 0 0;
}
a:hover.twitter {
background-position: 0 -31px;
}
</style>
</head>
<body>
<a href="#" class="social twitter"><span>share in twitter</span></a>
</body>
</html>
The code above is rendered as follows: