Skip to content

Instantly share code, notes, and snippets.

/index.html

Created March 31, 2016 15:06
Show Gist options
  • Save anonymous/244beb57649a2c1992487a3567c4b55c to your computer and use it in GitHub Desktop.
Save anonymous/244beb57649a2c1992487a3567c4b55c to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/kiyipo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.fave {
width: 70px;
height: 50px;
background: url(https://cssanimation.rocks/images/posts/steps/twitter_fave.png) no-repeat;
background-position: 0 0;
}
.fave:hover {
background-position: -3519px 0;
transition: background 1.5s steps(55);
}
</style>
</head>
<body>
<section class="fave"></section>
<script id="jsbin-source-css" type="text/css">.fave {
width: 70px;
height: 50px;
background: url(https://cssanimation.rocks/images/posts/steps/twitter_fave.png) no-repeat;
background-position: 0 0;
}
.fave:hover {
background-position: -3519px 0;
transition: background 1.5s steps(55);
}</script>
</body>
</html>
Raw
jsbin.kiyipo.css
.fave {
width: 70px;
height: 50px;
background: url(https://cssanimation.rocks/images/posts/steps/twitter_fave.png) no-repeat;
background-position: 0 0;
}
.fave:hover {
background-position: -3519px 0;
transition: background 1.5s steps(55);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment