supermarkt.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: 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%;
}
}
@-o-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%;
}
}
@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%;
}
}
#customer0, #customer5 {
  -webkit-animation: shopping0 10s linear 0s infinite;
  -moz-animation: shopping0 10s linear 0s infinite;
  -ms-animation: shopping0 10s linear 0s infinite;
  -o-animation: shopping0 10s linear 0s infinite;
  animation: shopping0 10s linear 0s infinite;
}
#customer5 {
  -webkit-animation-delay: 5s;
}
#checkout0 {
  top: 10%;
}
@-webkit-keyframes shopping1 {
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: 30%;
  right: 34%;
}
68%,
72% {
  top: 30%;
  right: 12%;
}
77%,
85% {
  top: 30%;
  right: 6.5%;
}
100% {
  top: 30%;
  right: -40%;
}
}
@-moz-keyframes shopping1 {
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: 30%;
  right: 34%;
}
68%,
72% {
  top: 30%;
  right: 12%;
}
77%,
85% {
  top: 30%;
  right: 6.5%;
}
100% {
  top: 30%;
  right: -40%;
}
}
@-ms-keyframes shopping1 {
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: 30%;
  right: 34%;
}
68%,
72% {
  top: 30%;
  right: 12%;
}
77%,
85% {
  top: 30%;
  right: 6.5%;
}
100% {
  top: 30%;
  right: -40%;
}
}
@-o-keyframes shopping1 {
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: 30%;
  right: 34%;
}
68%,
72% {
  top: 30%;
  right: 12%;
}
77%,
85% {
  top: 30%;
  right: 6.5%;
}
100% {
  top: 30%;
  right: -40%;
}
}
@keyframes shopping1 {
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: 30%;
  right: 34%;
}
68%,
72% {
  top: 30%;
  right: 12%;
}
77%,
85% {
  top: 30%;
  right: 6.5%;
}
100% {
  top: 30%;
  right: -40%;
}
}
#customer1, #customer6 {
  -webkit-animation: shopping1 10s linear 1s infinite;
  -moz-animation: shopping1 10s linear 1s infinite;
  -ms-animation: shopping1 10s linear 1s infinite;
  -o-animation: shopping1 10s linear 1s infinite;
  animation: shopping1 10s linear 1s infinite;
}
#customer6 {
  -webkit-animation-delay: 6s;
}
#checkout1 {
  top: 30%;
}
@-webkit-keyframes shopping2 {
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: 50%;
  right: 34%;
}
68%,
72% {
  top: 50%;
  right: 12%;
}
77%,
85% {
  top: 50%;
  right: 6.5%;
}
100% {
  top: 50%;
  right: -40%;
}
}
@-moz-keyframes shopping2 {
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: 50%;
  right: 34%;
}
68%,
72% {
  top: 50%;
  right: 12%;
}
77%,
85% {
  top: 50%;
  right: 6.5%;
}
100% {
  top: 50%;
  right: -40%;
}
}
@-ms-keyframes shopping2 {
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: 50%;
  right: 34%;
}
68%,
72% {
  top: 50%;
  right: 12%;
}
77%,
85% {
  top: 50%;
  right: 6.5%;
}
100% {
  top: 50%;
  right: -40%;
}
}
@-o-keyframes shopping2 {
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: 50%;
  right: 34%;
}
68%,
72% {
  top: 50%;
  right: 12%;
}
77%,
85% {
  top: 50%;
  right: 6.5%;
}
100% {
  top: 50%;
  right: -40%;
}
}
@keyframes shopping2 {
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: 50%;
  right: 34%;
}
68%,
72% {
  top: 50%;
  right: 12%;
}
77%,
85% {
  top: 50%;
  right: 6.5%;
}
100% {
  top: 50%;
  right: -40%;
}
}
#customer2, #customer7 {
  -webkit-animation: shopping2 10s linear 2s infinite;
  -moz-animation: shopping2 10s linear 2s infinite;
  -ms-animation: shopping2 10s linear 2s infinite;
  -o-animation: shopping2 10s linear 2s infinite;
  animation: shopping2 10s linear 2s infinite;
}
#customer7 {
  -webkit-animation-delay: 7s;
}
#checkout2 {
  top: 50%;
}
@-webkit-keyframes shopping3 {
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: 70%;
  right: 34%;
}
68%,
72% {
  top: 70%;
  right: 12%;
}
77%,
85% {
  top: 70%;
  right: 6.5%;
}
100% {
  top: 70%;
  right: -40%;
}
}
@-moz-keyframes shopping3 {
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: 70%;
  right: 34%;
}
68%,
72% {
  top: 70%;
  right: 12%;
}
77%,
85% {
  top: 70%;
  right: 6.5%;
}
100% {
  top: 70%;
  right: -40%;
}
}
@-ms-keyframes shopping3 {
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: 70%;
  right: 34%;
}
68%,
72% {
  top: 70%;
  right: 12%;
}
77%,
85% {
  top: 70%;
  right: 6.5%;
}
100% {
  top: 70%;
  right: -40%;
}
}
@-o-keyframes shopping3 {
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: 70%;
  right: 34%;
}
68%,
72% {
  top: 70%;
  right: 12%;
}
77%,
85% {
  top: 70%;
  right: 6.5%;
}
100% {
  top: 70%;
  right: -40%;
}
}
@keyframes shopping3 {
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: 70%;
  right: 34%;
}
68%,
72% {
  top: 70%;
  right: 12%;
}
77%,
85% {
  top: 70%;
  right: 6.5%;
}
100% {
  top: 70%;
  right: -40%;
}
}
#customer3, #customer8 {
  -webkit-animation: shopping3 10s linear 3s infinite;
  -moz-animation: shopping3 10s linear 3s infinite;
  -ms-animation: shopping3 10s linear 3s infinite;
  -o-animation: shopping3 10s linear 3s infinite;
  animation: shopping3 10s linear 3s infinite;
}
#customer8 {
  -webkit-animation-delay: 8s;
}
#checkout3 {
  top: 70%;
}
@-webkit-keyframes shopping4 {
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: 90%;
  right: 34%;
}
68%,
72% {
  top: 90%;
  right: 12%;
}
77%,
85% {
  top: 90%;
  right: 6.5%;
}
100% {
  top: 90%;
  right: -40%;
}
}
@-moz-keyframes shopping4 {
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: 90%;
  right: 34%;
}
68%,
72% {
  top: 90%;
  right: 12%;
}
77%,
85% {
  top: 90%;
  right: 6.5%;
}
100% {
  top: 90%;
  right: -40%;
}
}
@-ms-keyframes shopping4 {
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: 90%;
  right: 34%;
}
68%,
72% {
  top: 90%;
  right: 12%;
}
77%,
85% {
  top: 90%;
  right: 6.5%;
}
100% {
  top: 90%;
  right: -40%;
}
}
@-o-keyframes shopping4 {
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: 90%;
  right: 34%;
}
68%,
72% {
  top: 90%;
  right: 12%;
}
77%,
85% {
  top: 90%;
  right: 6.5%;
}
100% {
  top: 90%;
  right: -40%;
}
}
@keyframes shopping4 {
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: 90%;
  right: 34%;
}
68%,
72% {
  top: 90%;
  right: 12%;
}
77%,
85% {
  top: 90%;
  right: 6.5%;
}
100% {
  top: 90%;
  right: -40%;
}
}
#customer4, #customer9 {
  -webkit-animation: shopping4 10s linear 4s infinite;
  -moz-animation: shopping4 10s linear 4s infinite;
  -ms-animation: shopping4 10s linear 4s infinite;
  -o-animation: shopping4 10s linear 4s infinite;
  animation: shopping4 10s linear 4s infinite;
}
#customer9 {
  -webkit-animation-delay: 9s;
}
#checkout4 {
  top: 90%;
}