/* @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% 30% / 15% 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;
}
// Create animation for 10 dummies and place 5 checkouts
@checkoutCount: 5;
@duration: 10s;
@newline: `"\n"`; // Static constant: Newline
.GoShop(@num) when (@num < @checkoutCount) {
@top: @num*20% + 10%;
.Keyframe(@pre, @post, @vendor) {
(~"@{pre}@@{vendor}keyframes shopping@{num} {@{newline}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: @top; right: 34%; }
68%, 72% { top: @top; right: 12%; }
77%, 85% { top: @top; right: 6.5%;}
100% { top: @top; right:-40%; }
.Local(){}
.Local() when (@post=1) {
@otherCustomerIndex: @num + @checkoutCount;
(~"}@{newline}#customer@{num}, #customer@{otherCustomerIndex}") {
// name duration timing-function delay iteration-count
@animation: ~"shopping@{num}" @duration linear (@num * @duration / 2 / @checkoutCount) infinite;
-webkit-animation: @animation;
-moz-animation: @animation;
-ms-animation: @animation;
-o-animation: @animation;
animation: @animation;
}
(~"#customer@{otherCustomerIndex}") {
@delay: @otherCustomerIndex * @duration / 2 / @checkoutCount;
-webkit-animation-delay: @delay;
}
(~"#checkout@{num}") {
top: @top;
}
}
.Local;
}
.Keyframe("" , 0, "-webkit-");
.Keyframe(~"}@{newline}", 0, "-moz-");
.Keyframe(~"}@{newline}", 0, "-ms-");
.Keyframe(~"}@{newline}", 0, "-o-");
.Keyframe(~"}@{newline}", 1, "");
// Next
.GoShop(@num + 1);
}
.GoShop(@checkoutCount) {}
.GoShop(0);