supermarkt.less

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