Vector Pixels: CSS Animation

index.html

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -0.5 20 28" shape-rendering="crispEdges" preserveAspectRatio="xMinYMid slice">
  <metadata>Made with Pixels to Svg https://codepen.io/shshaw/pen/XbxvNj</metadata>

  <g id="spritesheet">
<path stroke="#4f0103" d="M8 0h5M27 0h5M48 0h5M6 1h2M13 1h1M25 1h2M32 1h1M46 1h2M53 1h1M67 1h5M5 2h1M13 2h1M24 2h1M32 2h1M45 2h1M53 2h1M65 2h2M72 2h1M4 3h1M23 3h1M44 3h1M64 3h1M72 3h1M3 4h1M22 4h1M43 4h1M63 4h1M2 5h1M21 5h1M42 5h1M62 5h1M2 6h1M21 6h1M42 6h1M61 6h1M61 7h1M5 14h1M8 14h2M23 14h2M27 14h2M45 14h1M48 14h2M61 14h2M75 14h1M4 15h1M7 15h1M22 15h1M31 15h1M44 15h1M47 15h1M60 15h1M67 15h2M3 16h1M21 16h1M43 16h1M60 16h1M3 17h1M21 17h1M43 17h1M60 17h1M4 18h1M21 18h1M44 18h1M60 18h1M66 18h2M70 18h2M5 19h1M8 19h2M22 19h2M45 19h1M48 19h2M6 20h3M46 20h3" />
<path stroke="#fc4472" d="M8 1h2M11 1h2M27 1h2M30 1h2M48 1h2M51 1h2M6 2h2M25 2h2M46 2h2M67 2h2M70 2h2M5 3h1M24 3h1M45 3h1M65 3h2M4 4h1M23 4h1M44 4h1M64 4h1M63 5h1M5 15h2M23 15h2M45 15h2M5 16h3M22 16h2M29 16h1M45 16h3M62 16h4M68 16h2M6 17h2M30 17h1M46 17h2M7 18h1M47 18h1" />
<path stroke="#fed777" d="M10 1h1M29 1h1M50 1h1M10 2h1M29 2h1M50 2h1M69 2h1M69 3h1M73 21h1M33 23h1M62 25h1M10 26h1M12 26h1M26 26h1M50 26h1M52 26h1" />
<path stroke="#ae2b60" d="M8 2h1M12 2h1M27 2h1M31 2h1M48 2h1M52 2h1M6 3h2M25 3h2M46 3h2M67 3h1M71 3h1M5 4h1M24 4h1M45 4h1M65 4h2M3 5h2M22 5h2M43 5h2M64 5h1M3 6h2M22 6h2M43 6h2M62 6h2M62 7h2M6 14h2M25 14h2M46 14h2M8 15h1M28 15h2M48 15h1M61 15h6M4 16h1M30 16h1M44 16h1M61 16h1M4 17h2M22 17h1M31 17h1M44 17h2M61 17h1M65 17h2M69 17h2M5 18h2M8 18h1M22 18h1M45 18h2M48 18h1M6 19h2M46 19h2" />
<path stroke="#de9f49" d="M9 2h1M28 2h1M49 2h1M68 3h1" />
<path stroke="#fff8ff" d="M11 2h1M30 2h1M51 2h1M70 3h1M8 6h2M11 6h2M27 6h2M30 6h2M48 6h2M51 6h2M8 7h1M12 7h1M27 7h1M31 7h1M48 7h1M52 7h1M67 7h2M70 7h2M8 8h1M12 8h1M27 8h1M31 8h1M48 8h1M52 8h1M67 8h1M71 8h1M67 9h1M71 9h1M10 15h3M50 15h3M72 15h1M74 15h1M9 16h5M25 16h2M49 16h5M71 16h1M73 16h2M9 17h5M24 17h5M33 17h1M49 17h5M73 17h2M10 18h3M24 18h5M32 18h1M50 18h3M62 18h2M13 19h1M25 19h3M29 19h1M32 19h1M53 19h1M61 19h5M68 19h2M72 19h1M61 20h5M68 20h2M62 21h3" />
<path stroke="#000000" d="M8 3h7M27 3h7M48 3h7M6 4h10M25 4h10M46 4h10M67 4h7M5 5h11M24 5h11M45 5h11M65 5h10M5 6h2M13 6h2M24 6h2M32 6h2M45 6h2M53 6h2M64 6h11M4 7h2M9 7h1M11 7h1M23 7h2M28 7h1M30 7h1M44 7h2M49 7h1M51 7h1M64 7h2M72 7h2M4 8h2M9 8h1M11 8h1M23 8h2M28 8h1M30 8h1M44 8h2M49 8h1M51 8h1M63 8h2M68 8h1M70 8h1M4 9h3M23 9h3M44 9h3M63 9h2M68 9h1M70 9h1M5 10h1M8 10h1M24 10h1M27 10h1M45 10h1M48 10h1M63 10h3M2 11h2M7 11h9M21 11h2M26 11h9M42 11h2M47 11h9M64 11h1M67 11h1M3 12h2M9 12h6M22 12h2M28 12h6M43 12h2M49 12h6M61 12h2M66 12h9M4 13h1M23 13h1M44 13h1M62 13h2M68 13h6M63 14h1M75 21h1M34 22h1M61 22h1M74 22h2M21 23h1M35 23h1M60 23h1M74 23h2M21 24h1M34 24h2M60 24h1M73 24h3M10 25h1M12 25h1M21 25h1M26 25h1M30 25h1M32 25h4M50 25h1M52 25h1M60 25h1M72 25h3M5 26h1M11 26h1M13 26h1M22 26h1M27 26h1M30 26h5M45 26h1M51 26h1M53 26h1M60 26h1M63 26h2M72 26h2M5 27h9M23 27h5M31 27h2M45 27h9M61 27h2" />
<path stroke="#fd7172" d="M7 6h1M10 6h1M26 6h1M29 6h1M47 6h1M50 6h1M2 7h1M6 7h2M21 7h1M25 7h2M42 7h1M46 7h2M66 7h1M69 7h1M1 8h1M6 8h1M20 8h1M25 8h1M41 8h1M46 8h1M61 8h1M65 8h2M1 9h1M3 9h1M9 9h2M20 9h1M22 9h1M28 9h2M41 9h1M43 9h1M49 9h2M60 9h1M65 9h1M2 10h3M10 10h4M21 10h3M29 10h4M42 10h3M50 10h4M60 10h1M62 10h1M68 10h2M4 11h3M23 11h3M44 11h3M61 11h3M69 11h4M5 12h2M24 12h2M45 12h2M63 12h3M6 13h7M25 13h6M46 13h7M64 13h2M65 14h6" />
<path stroke="#fed0c1" d="M3 7h1M10 7h1M22 7h1M29 7h1M43 7h1M50 7h1M3 8h1M7 8h1M10 8h1M13 8h1M22 8h1M26 8h1M29 8h1M32 8h1M43 8h1M47 8h1M50 8h1M53 8h1M62 8h1M69 8h1M7 9h2M11 9h3M26 9h2M30 9h3M47 9h2M51 9h3M62 9h1M66 9h1M69 9h1M72 9h1M6 10h2M25 10h2M46 10h2M66 10h2M70 10h3M65 11h2M7 12h2M26 12h2M47 12h2M66 13h2" />
<path stroke="#8e5825" d="M2 8h1M14 8h1M21 8h1M33 8h1M42 8h1M54 8h1M2 9h1M14 9h1M21 9h1M33 9h1M42 9h1M54 9h1M61 9h1M73 9h1M9 10h1M14 10h1M28 10h1M33 10h1M49 10h1M54 10h1M61 10h1M73 10h1M68 11h1M73 11h1M5 13h1M13 13h1M24 13h1M31 13h1M45 13h1M53 13h1M10 14h3M29 14h2M50 14h3M64 14h1M71 14h4M9 15h1M13 15h1M25 15h3M49 15h1M53 15h1M69 15h3M73 15h1M75 15h1M8 16h1M14 16h1M24 16h1M27 16h2M32 16h2M48 16h1M54 16h1M72 16h1M75 16h1M8 17h1M14 17h1M23 17h1M29 17h1M34 17h1M48 17h1M54 17h1M62 17h3M72 17h1M75 17h1M9 18h1M13 18h1M23 18h1M29 18h1M33 18h2M49 18h1M53 18h1M61 18h1M64 18h2M73 18h2M10 19h3M24 19h1M28 19h1M50 19h3M60 19h1M66 19h1M25 20h3M60 20h1M66 20h1M73 20h2M61 21h1M65 21h1M72 21h1M74 21h1M62 22h3M71 22h3M22 23h1M34 23h1M61 23h2M71 23h3M22 24h2M31 24h3M61 24h2M71 24h2M5 25h5M11 25h1M22 25h4M31 25h1M45 25h5M51 25h1M61 25h1M63 25h2M71 25h1M6 26h4M23 26h3M46 26h4M61 26h2" />
<path stroke="#22348d" d="M30 15h1M66 16h2M70 16h1M3 18h1M43 18h1M3 19h2M33 19h1M43 19h2M73 19h1M3 20h1M5 20h1M13 20h1M22 20h1M33 20h1M43 20h1M45 20h1M53 20h1M72 20h1M3 21h1M13 21h1M23 21h1M33 21h1M43 21h1M53 21h1M71 21h1M4 22h1M10 22h1M12 22h1M22 22h2M33 22h1M44 22h1M50 22h1M52 22h1M70 22h1M4 23h1M10 23h1M12 23h1M23 23h3M28 23h2M32 23h1M44 23h1M50 23h1M52 23h1M63 23h2M70 23h1M5 24h7M24 24h5M30 24h1M45 24h7M63 24h8M65 25h2" />
<path stroke="#43809e" d="M31 16h1M67 17h2M71 17h1M31 18h1M4 20h1M12 20h1M23 20h2M32 20h1M44 20h1M52 20h1M4 21h3M12 21h1M24 21h2M32 21h1M44 21h3M52 21h1M5 22h3M11 22h1M24 22h3M28 22h2M32 22h1M45 22h3M51 22h1M65 22h2M5 23h5M11 23h1M26 23h2M30 23h2M45 23h5M51 23h1M65 23h5" />
<path stroke="#83d8cf" d="M32 17h1M30 18h1M68 18h2M72 18h1M30 19h2M67 19h1M70 19h2M9 20h3M28 20h4M49 20h3M67 20h1M70 20h2M7 21h5M26 21h6M47 21h5M66 21h5M8 22h2M27 22h1M30 22h2M48 22h2M67 22h3" />
  </g>
</svg>

style.less

svg { 
  width: 20%; 
  height: auto;
  max-height: 100vh;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  overflow: hidden;
}

@keyframes frameTransform {
  100% { transform: translateX(-80px); }
}
#spritesheet {
  animation: frameTransform 500ms steps(4) infinite;
}

html, body { height: 100%; }
body { background: #333; }

vector-pixels-css-animation.markdown

Vector Pixels: CSS Animation

Vector sprite sheet animation with CSS.

Sprite converted with Pixels.svg http://codepen.io/shshaw/pen/XbxvNj

A Pen by José Paulo Fernandes on CodePen.

License.