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% 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%;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement