Mostly css but requires js if you are picky like me. Feel free to remove the js.
A Pen by Adam Wicks on CodePen.
Created
November 18, 2015 13:14
-
-
Save procky/0ae1862e9f56f947295d to your computer and use it in GitHub Desktop.
Animated sprite menu
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Animated sprite menu</h1> | |
| <nav> | |
| <a class="no-animation-on-load" href="#"></a> | |
| <a class="no-animation-on-load" href="#"></a> | |
| <a class="no-animation-on-load" href="#"></a> | |
| </nav> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $("nav a").on('mouseleave', function(){ | |
| if($(this).hasClass("no-animation-on-load")){ | |
| $(this).removeClass("no-animation-on-load"); | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| nav a { | |
| display: inline-block; | |
| width: 50px; | |
| height: 72px; | |
| background-image: url("http://s.cdpn.io/79/sprite-steps.png"); | |
| animation: calm .6s steps(5) 0s 1 normal forwards running; | |
| } | |
| nav a:hover { | |
| animation: defend .6s steps(5) 0s 1 normal forwards running; | |
| } | |
| @keyframes defend { | |
| from { background-position: 0px; } | |
| to { background-position: -250px; } | |
| } | |
| @keyframes calm { | |
| from { background-position: -250px; } | |
| to { background-position: 0px; } | |
| } | |
| .no-animation-on-load { | |
| animation: none; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment