Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A CodePen by Rachel Nabors. Cat walk + sit w/ animation delay - So walk-cycles are pretty easy. Use steps() in your CSS3 and impress your friends. So what about doing something with the end of that loop? Here I use animation-delay to play a second, sittin
<div id="tuna"></div>
#tuna {
background: url(http://www.rachelnabors.com/animation/toys/img/tuna_sprite.png?2) 0 0 no-repeat;
height: 200px;
width: 400px;
margin-left: -300px;
margin-top: -185px;
position: absolute;
top: 50%;
left: 50%;
transition: margin-left 4s linear;
/* "Steps" cause the animation to jump between a set number of steps placed equally along the duration. For example, steps(10) would make the animation jump along in ten equal steps. http://dev.opera.com/articles/view/css3-animations/ */
animation:
walk-cycle 1s steps(11, end) 4,
sit-down .5s steps(5, end) 4s 1;
animation-fill-mode: forwards;
}
/* Above I'm using duration to kick off a second animation after the first starts. See this key:
animation: name duration timing-function delay iteration-count direction fill-mode; */
@keyframes walk-cycle {
0% { background-position: 0 0; }
100% {background-position: 0 100%; }
}
@keyframes sit-down {
0% { background-position: -400px 0; }
100% {background-position: -400px -1000px; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment