title
Walking
:root{ --charW:64px; --charH:64px; } body{ font:20px/1.1em arial, sans-serif; background:lightgray; } .char{ width:var(--charW); height:var(--charH); background: url(https://raw.githubusercontent.com/sanderfrenken/Universal-LPC-Spritesheet-Character-Generator/master/spritesheets/body/skeleton/gray.png) no-repeat; background-position: calc(0 * var(--charH)) calc(-8 * var(--charW)); } .walk-top{animation: walk-top 1s steps(1) 0s infinite normal;} .walk-left{animation: walk-left 1s steps(1) 0s infinite normal;} .walk-right{animation: walk-right 1s steps(1) 0s infinite normal;} .walk-bottom{animation: walk-bottom 1s steps(1) 0s infinite normal;} @keyframes walk-top{ 0% {background-position: calc(-1 * var(--charH)) calc(-8 * var(--charW));} 12.5% {background-position: calc(-2 * var(--charH)) calc(-8 * var(--charW));} 25% {background-position: calc(-3 * var(--charH)) calc(-8 * var(--charW));} 37.5% {background-position: calc(-4 * var(--charH)) calc(-8 * var(--charW));} 50% {background-position: calc(-5 * var(--charH)) calc(-8 * var(--charW));} 62.5% {background-position: calc(-6 * var(--charH)) calc(-8 * var(--charW));} 75% {background-position: calc(-7 * var(--charH)) calc(-8 * var(--charW));} 87.5% {background-position: calc(-8 * var(--charH)) calc(-8 * var(--charW));} 100% {background-position: calc(-9 * var(--charH)) calc(-8 * var(--charW));} } @keyframes walk-left{ 0% {background-position: calc(-1 * var(--charH)) calc(-9 * var(--charW));} 12.5% {background-position: calc(-2 * var(--charH)) calc(-9 * var(--charW));} 25% {background-position: calc(-3 * var(--charH)) calc(-9 * var(--charW));} 37.5% {background-position: calc(-4 * var(--charH)) calc(-9 * var(--charW));} 50% {background-position: calc(-5 * var(--charH)) calc(-9 * var(--charW));} 62.5% {background-position: calc(-6 * var(--charH)) calc(-9 * var(--charW));} 75% {background-position: calc(-7 * var(--charH)) calc(-9 * var(--charW));} 87.5% {background-position: calc(-8 * var(--charH)) calc(-9 * var(--charW));} 100% {background-position: calc(-9 * var(--charH)) calc(-9 * var(--charW));} } @keyframes walk-right{ 0% {background-position: calc(-1 * var(--charH)) calc(-10 * var(--charW));} 12.5% {background-position: calc(-2 * var(--charH)) calc(-10 * var(--charW));} 25% {background-position: calc(-3 * var(--charH)) calc(-10 * var(--charW));} 37.5% {background-position: calc(-4 * var(--charH)) calc(-10 * var(--charW));} 50% {background-position: calc(-5 * var(--charH)) calc(-10 * var(--charW));} 62.5% {background-position: calc(-6 * var(--charH)) calc(-10 * var(--charW));} 75% {background-position: calc(-7 * var(--charH)) calc(-10 * var(--charW));} 87.5% {background-position: calc(-8 * var(--charH)) calc(-10 * var(--charW));} 100% {background-position: calc(-9 * var(--charH)) calc(-10 * var(--charW));} } @keyframes walk-bottom{ 0% {background-position: calc(-1 * var(--charH)) calc(-11 * var(--charW));} 12.5% {background-position: calc(-2 * var(--charH)) calc(-11 * var(--charW));} 25% {background-position: calc(-3 * var(--charH)) calc(-11 * var(--charW));} 37.5% {background-position: calc(-4 * var(--charH)) calc(-11 * var(--charW));} 50% {background-position: calc(-5 * var(--charH)) calc(-11 * var(--charW));} 62.5% {background-position: calc(-6 * var(--charH)) calc(-11 * var(--charW));} 75% {background-position: calc(-7 * var(--charH)) calc(-11 * var(--charW));} 87.5% {background-position: calc(-8 * var(--charH)) calc(-11 * var(--charW));} 100% {background-position: calc(-9 * var(--charH)) calc(-11 * var(--charW));} }
snap
save
new
fork
download
html
css
js
output
gallery
config
➚ link to output
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code