Animation How to - Hover to slide CSS3 background sprite animation using transitions








Question

We would like to know how to hover to slide CSS3 background sprite animation using transitions.

Answer


<!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: