SVG Sprite Animation #2

index.haml

.container
  .bk
    .mid
      .fore
        .figure

index.html

<div class='container'>
  <div class='bk'>
    <div class='mid'>
      <div class='fore'>
        <div class='figure'></div>
      </div>
    </div>
  </div>
</div>

script.js

// no one here but us chickens

style.css

html {
  background: #000;
}

.container {
  margin: 30px auto;
  border: 1px solid #333;
  background: #222;
}

/*--extend--*/
.area, .fore, .mid, .bk, .container {
  width: 600px;
  height: 348px;
}

.figure {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/walk-ing4.svg") no-repeat;
  width: 182px;
  height: 266px;
  transform: translate3D(200px, 50px, 0);
  animation: walk 0.78s steps(9) infinite;
}

.no-svg .figure {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/walk-ing4.png");
}

.fore {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/fore.svg");
  transform: translateZ(0);
  animation: bk 7s -5s linear infinite;
}

.no-svg .fore {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/fore.png");
}

.mid {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/mid.svg");
  animation: bk 15s -5s linear infinite;
  transform: translateZ(0);
}

.no-svg .mid {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/mid.png");
}

.bk {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/bkwalk2.svg");
  animation: bk 20s -5s linear infinite;
  transform: translateZ(0);
}

.no-svg .bk {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/bkwalk2.png");
}

@keyframes walk {
  100% {
    background-position: 0 -2376px;
  }
}
@keyframes bk {
  100% {
    background-position: 200% 0;
  }
}
@media screen and (max-width: 600px) {
  .container {
    width: 100%;
    margin-top: 0;
  }

  .figure {
    transform: translate3D(40%, 50px, 0);
  }
}

style.scss

html {
  background: #000;
}

.container {
  margin: 30px auto;
  border: 1px solid #333;
  background: #222;
}

/*--extend--*/
.area {
  width: 600px;
  height: 348px;
}

.fore, .mid, .bk, .container { @extend .area; }

.figure {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/walk-ing4.svg") no-repeat;
  width: 182px;
  height: 266px;
  transform: translate3D(200px, 50px, 0);
  animation: walk 0.78s steps(9) infinite;
}
.no-svg .figure {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/walk-ing4.png");
}

.fore {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/fore.svg");
  transform: translateZ(0);
  animation: bk 7s -5s linear infinite;
}
.no-svg .fore {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/fore.png");
}

.mid {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/mid.svg");
  animation: bk 15s -5s linear infinite;
  transform: translateZ(0);
}
.no-svg .mid {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/mid.png");
}

.bk {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/bkwalk2.svg");
  animation: bk 20s -5s linear infinite;
  transform: translateZ(0);
}
.no-svg .bk {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/bkwalk2.png");
}

@keyframes walk {
  100% { background-position: 0 -2376px; }
}

@keyframes bk {
  100% { background-position: 200% 0; }
}

@media screen and ( max-width: 600px ) {
  .container { 
    width: 100%; 
    margin-top: 0;
  }
  .figure { transform: translate3D(40%, 50px, 0); }
}

SVG-Sprite-Animation-#2.markdown

SVG Sprite Animation #2

Showing first keyframe animation and animating color over step(), then also showing how scrolling through a sprite can be used for seamless background + also parallax with the same animation over different time scales.

Forked from Sarah Drasner's Pen SVG Sprite Animation #2.

A Pen by @rafszul on CodePen.

License.

SVG-Sprite-Animation-#2.md

SVG Sprite Animation #2

Showing first keyframe animation and animating color over step(), then also showing how scrolling through a sprite can be used for seamless background + also parallax with the same animation over different time scales.

Forked from Sarah Drasner's Pen SVG Sprite Animation #2.

A Pen by @rafszul on CodePen.

License.