Stolon

title

: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

gallery