/* @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%;
}