Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* @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);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement