JSFiddle - React, Tailwind, and code Playground

HTML

<div id="customer0"></div>
<div id="customer1"></div>
<div id="customer2"></div>
<div id="customer3"></div>
<div id="customer4"></div>
<div id="customer5"></div>
<div id="customer6"></div>
<div id="customer7"></div>
<div id="customer8"></div>
<div id="customer9"></div>

<div id="checkout0"></div>
<div id="checkout1"></div>
<div id="checkout2"></div>
<div id="checkout3"></div>
<div id="checkout4"></div>

CSS

/* @author Rob W - Animation of a dummy in a supermarket */
body {
  overflow: hidden;
}
/* The checkout */
[id^="checkout"] {
  padding: 0;
  border: 0;
  display: block;
  position: absolute;
  width: 10%;
  height: 7%;
  right: 7%;
  background: rgba(144, 238, 144, 0.7);
  border-radius: 30% 10% 10% 2% 10% 10% 15%;
}
[id^="checkout"]:before {
  content: "";
  position: absolute;
  display: block;
  width: 220%;
  height: 80%;
  background: rgba(144, 238, 144, 0.7);
  top: 20%;
  right: 100%;
}
/* Our walking dummy */
[id^="customer"] {
  padding: 0;
  border: 0;
  width: 10px;
  height: 0px;
  border-width: 50px 20px;
  border-style: solid;
  border-color: red transparent transparent;
  border-radius: 25px;
  position: absolute;
  right: 100%;
}
[id^="customer"]:before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50px;
  background: pink;
  margin-top: -80px;
  margin-left: -10px;
}
@-webkit-keyframes shopping0 {
0% {
  top: 50%;
  right: 100%;
}
8%,
14% {
  top: 50%;
  right: 85%;
}
17%,
20% {
  top: 50%;
  right: 80%;
}
23%,
26% {
  top: 50%;
  right: 75%;
}
29%,
33% {
  top: 50%;
  right: 70%;
}
36%,
39% {
  top: 50%;
  right: 65%;
}
49%,
53% {
  top: 10%;
  right: 34%;
}
68%,
72% {
  top: 10%;
  right: 12%;
}
77%,
85% {
  top: 10%;
  right: 6.5%;
}
100% {
  top: 10%;
  right: -40%;
}
}
@-moz-keyframes shopping0 {
0% {
  top: 50%;
  right: 100%;
}
8%,
14% {
  top: 50%;
  right: 85%;
}
17%,
20% {
  top: 50%;
  right: 80%;
}
23%,
26% {
  top: 50%;
  right: 75%;
}
29%,
33% {
  top: 50%;
  right: 70%;
}
36%,
39% {
  top: 50%;
  right: 65%;
}
49%,
53% {
  top: 10%;
  right: 34%;
}
68%,
72% {
  top: 10%;
  right: 12%;
}
77%,
85% {
  top: 10%;
  right: 6.5%;
}
100% {
  top: 10%;
  right: -40%;
}
}
@-ms-keyframes shopping0 {
0% {
  top: 50%;
  right: 100%;
}
8%,
14% {
  top: 50%;
  right: 85%;
}
17%,
20% {
  top: 50%;
  right: 80%;
}
23%,
26% {
  top: 50%;
  right: 75%;
}
29%,
33% {
  top: 50%;
  right: 70%;
}
36%,
39% {
  top:...

JavaScript

/* @author Rob W
 *  See also
 * http://stackoverflow.com/q/6896404?shortening-css3-animation-keyframe-definitions
    * LESS CSS source: http://pastebin.com/BcRYzdBj
 */