body {
  background: linear-gradient(to right, #2a272a, 
  #ffaaff);
}

@keyframes walkanim {
  to { background-position: 100% 0; }
}
@keyframes stroll {
  from { transform: translateX(-100%); }
  to { transform: translateX(500%); }
}
#walk-container {
	display: flex;
	position: relative;
	width: 20%;
	padding-bottom: 30%; 
	vertical-align: middle; 
	overflow: hidden; 
  animation: stroll 7s linear infinite;
  animation-direction: alternate-reverse;
}
#walk {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://res.cloudinary.com/duq3b11nz/image/upload/v1543093799/pinksocks_ngblhh.svg);
  background-repeat: no-repeat;
  background-size: 900%;
  animation: walkanim 0.7s infinite steps(7); 
  animation-direction: alternate-reverse;
}
/*
Learning with @DudleyStorey CSS Animations: http://thenewcode.com/1082/Make-a-Responsive-Animated-Walk-Cycle-with-SVG-and-CSS-steps 
*/