Walking Puma Scene Animation

index.html

<input type="checkbox" id="play" />
<label for="play" on="Stop" off="Play"></label>
<div id="scene">
  <div id="puma"></div>
</div>

style.scss

$puma-ratio: 154 / 274; // aspect ratio of animation frame
$puma-w: 250px; $puma-h: $puma-w * $puma-ratio; 
$puma-frames: 16;
$rocks-bg-ratio: 204 / 500;
$rocks-bg-w: 320px; $rocks-bg-h: $rocks-bg-w * $rocks-bg-ratio;
$grass-fg-ratio: 304 / 223;
$grass-fg-w: 140px; $grass-fg-h: $grass-fg-w * $grass-fg-ratio;
$bg-color: #DDD;
$puma-speed: 800ms;

body { background: #222; }

#play {
  opacity: 0;
  &:checked {
    ~ #scene {
      #puma { animation: puma $puma-speed steps(#{$puma-frames}, end) infinite; }
      &::before { animation: rocks-bg $puma-speed * 5 linear infinite; }
      &::after  { animation: grass-fg $puma-speed * 4 linear infinite; }
    }
    ~ label {
      &::before { content: attr(on); }
    }
  }
  
}

$label-h: 40px; 
$label-w: 100px; 
label {
  position: absolute;
  top: #{"calc(50% + " + ($puma-h + $label-h) + ")"};
  left: #{"calc(50% - " + ($label-w / 2) + ")"};
  height: $label-h;
  line-height: $label-h;
  width: $label-w;
  background-color: $bg-color;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.1;
  transition: opacity 100ms;
  &:hover { opacity: 1; }
  &::before {
    content: attr(off);
    display: block;
    position: absolute;
    height: $label-h;
    left: 0; right: 0; 
    text-align: center;
  }
}

#scene {
  background: $bg-color;
  position: absolute;
  width: $puma-w * 2;
  height: $puma-h * 2;
  border: 1px solid #BBB;
  overflow: hidden;
  top: #{"calc(50% - " + $puma-h + ")"};
  left: #{"calc(50% - " + $puma-w + ")"};
  // puma
  #puma {
    content: "";
    display: block;
    position: absolute;
    top: #{"calc(50% - " + $puma-h / 2 + ")"}; 
    left: #{"calc(50% - " + $puma-w / 2 + ")"};
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/animal-walk.png");
    background-size: $puma-w * $puma-frames $puma-h;
    height: $puma-h; width: $puma-w;
  }
  // rocks and grass
  &::before, &::after {
    content: "";
    display: block;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
  }    
  // background rocks
  &::before {
    top: #{"calc(50% - " + $puma-h / 2 + ")"}; 
    right: -$rocks-bg-w;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/rocks-bg.png");
    background-size: $rocks-bg-w $rocks-bg-h;
    filter: blur(1px);
    height: $rocks-bg-h; width: $rocks-bg-w;
  }
  // foreground grass
  &::after {
    top: #{"calc(50% - " + $grass-fg-h / 2 + ")"}; 
    right: -$grass-fg-w;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/grass-fg.png");
    background-size: $grass-fg-w $grass-fg-h;
    filter: blur(0.5px);
    opacity: 0.8;
    height: $grass-fg-h; width: $grass-fg-w;
  }
}

@keyframes puma {
  from { background-position: $puma-w * $puma-frames; }
  to   { background-position: 0px; }
}

@keyframes rocks-bg {
  from { right: -$rocks-bg-w; }
  to   { right: 100% }
}

@keyframes grass-fg {
  from { right: -$grass-fg-w; }
  to   { right: 100%; }
}

Walking Puma Scene Animation.markdown

Walking Puma Scene Animation

Puma sprite step CSS animation. Funky on safari??

Puma frames ripped from AfroAnnie, Rocks and Grass by Diane Wright

A Pen by Jake Albaugh on CodePen.

License.