Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

supermarkt.less

By: a guest on Jun 14th, 2012  |  syntax: CSS  |  size: 3.01 KB  |  views: 34  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. /* @author Rob W - Animation of a dummy in a supermarket */
  2. body {
  3.     overflow: hidden;
  4. }
  5. /* The checkout */
  6. [id^="checkout"] {
  7.     padding: 0;
  8.     border: 0;
  9.     display: block;
  10.     position: absolute;
  11.     width: 10%;
  12.     height: 7%;
  13.     right: 7%;
  14.     background: rgba(144, 238, 144, 0.7);
  15.     border-radius: 30% 10% 10% 30% / 15% 10% 10% 15%;
  16. }
  17. [id^="checkout"]:before {
  18.     content: "";
  19.     position: absolute;
  20.     display: block;
  21.     width: 220%;
  22.     height: 80%;
  23.     background: rgba(144, 238, 144, 0.7);
  24.     top: 20%;
  25.     right: 100%;
  26. }
  27.  
  28. /* Our walking dummy */
  29. [id^="customer"] {
  30.     padding: 0;
  31.     border: 0;
  32.     width: 10px;
  33.     height: 0px;
  34.     border-width: 50px 20px;
  35.     border-style: solid;
  36.     border-color: red transparent transparent;
  37.     border-radius: 25px;
  38.     position: absolute;
  39.     right: 100%;
  40. }
  41. [id^="customer"]:before {
  42.     content: "";
  43.     display: block;
  44.     width: 30px;
  45.     height: 30px;
  46.     border-radius: 50px;
  47.     background: pink;
  48.     margin-top: -80px;
  49.     margin-left: -10px;
  50. }
  51. // Create animation for 10 dummies and place 5 checkouts
  52. @checkoutCount: 5;
  53. @duration: 10s;
  54.  
  55. @newline: `"\n"`; // Static constant: Newline
  56. .GoShop(@num) when (@num < @checkoutCount) {
  57.     @top: @num*20% + 10%;
  58.     .Keyframe(@pre, @post, @vendor) {
  59.         (~"@{pre}@@{vendor}keyframes shopping@{num} {@{newline}0%") {
  60.             top: 50%; right:100%;
  61.         }
  62.         8% , 14% { top: 50%; right: 85%; }
  63.         17%, 20% { top: 50%; right: 80%; }
  64.         23%, 26% { top: 50%; right: 75%; }
  65.         29%, 33% { top: 50%; right: 70%; }
  66.         36%, 39% { top: 50%; right: 65%; }
  67.         49%, 53% { top: @top; right: 34%; }
  68.         68%, 72% { top: @top; right: 12%; }
  69.         77%, 85% { top: @top; right: 6.5%;}
  70.         100%     { top: @top; right:-40%; }
  71.         .Local(){}
  72.         .Local() when (@post=1) {
  73.             @otherCustomerIndex: @num + @checkoutCount;
  74.             (~"}@{newline}#customer@{num}, #customer@{otherCustomerIndex}") {
  75.                 // name duration timing-function delay iteration-count
  76.                 @animation: ~"shopping@{num}" @duration linear (@num * @duration / 2 / @checkoutCount) infinite;
  77.                 -webkit-animation: @animation;
  78.                 -moz-animation: @animation;
  79.                 -ms-animation: @animation;
  80.                 -o-animation: @animation;
  81.                 animation: @animation;
  82.             }
  83.             (~"#customer@{otherCustomerIndex}") {
  84.                 @delay: @otherCustomerIndex * @duration / 2 / @checkoutCount;
  85.                 -webkit-animation-delay: @delay;
  86.             }
  87.             (~"#checkout@{num}") {
  88.                 top: @top;
  89.             }
  90.         }    
  91.         .Local;
  92.     }
  93.     .Keyframe(""            , 0, "-webkit-");
  94.     .Keyframe(~"}@{newline}", 0,    "-moz-");
  95.     .Keyframe(~"}@{newline}", 0,     "-ms-");
  96.     .Keyframe(~"}@{newline}", 0,      "-o-");
  97.     .Keyframe(~"}@{newline}", 1,         "");
  98.     // Next
  99.     .GoShop(@num + 1);
  100. }
  101. .GoShop(@checkoutCount) {}
  102. .GoShop(0);
clone this paste RAW Paste Data