Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A CodePen by Rachel Nabors.
<div class="tuna"></div>
<p>Awwww yeah...</p>
.tuna {
-webkit-animation: walk-cycle 1s steps(11, end) infinite;
background: url(http://www.rachelnabors.com/animation/toys/img/tuna-walking_sprite.png) 0 0 no-repeat;
height: 200px;
width: 400px;
margin: 20% auto 0;
}
@-webkit-keyframes walk-cycle {
0% {background-position: 0 0; }
100% {background-position: 0 100%; }
}
p {text-align: center;}
@rachelnabors

This comment has been minimized.

Copy link
Owner Author

@rachelnabors rachelnabors commented Oct 30, 2012

Tuna walk cycle from my animations talk at CSS Dev Conf, yo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment