Pastebin is 300% more awesome when you are logged in. Sign Up, it's FREE!
Guest

supermarkt.css

By: a guest on Jun 14th, 2012  |  syntax: CSS  |  size: 14.01 KB  |  hits: 21  |  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% 2% 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. /* Our walking dummy */
  28. [id^="customer"] {
  29.   padding: 0;
  30.   border: 0;
  31.   width: 10px;
  32.   height: 0px;
  33.   border-width: 50px 20px;
  34.   border-style: solid;
  35.   border-color: red transparent transparent;
  36.   border-radius: 25px;
  37.   position: absolute;
  38.   right: 100%;
  39. }
  40. [id^="customer"]:before {
  41.   content: "";
  42.   display: block;
  43.   width: 30px;
  44.   height: 30px;
  45.   border-radius: 50px;
  46.   background: pink;
  47.   margin-top: -80px;
  48.   margin-left: -10px;
  49. }
  50. @-webkit-keyframes shopping0 {
  51. 0% {
  52.   top: 50%;
  53.   right: 100%;
  54. }
  55. 8%,
  56. 14% {
  57.   top: 50%;
  58.   right: 85%;
  59. }
  60. 17%,
  61. 20% {
  62.   top: 50%;
  63.   right: 80%;
  64. }
  65. 23%,
  66. 26% {
  67.   top: 50%;
  68.   right: 75%;
  69. }
  70. 29%,
  71. 33% {
  72.   top: 50%;
  73.   right: 70%;
  74. }
  75. 36%,
  76. 39% {
  77.   top: 50%;
  78.   right: 65%;
  79. }
  80. 49%,
  81. 53% {
  82.   top: 10%;
  83.   right: 34%;
  84. }
  85. 68%,
  86. 72% {
  87.   top: 10%;
  88.   right: 12%;
  89. }
  90. 77%,
  91. 85% {
  92.   top: 10%;
  93.   right: 6.5%;
  94. }
  95. 100% {
  96.   top: 10%;
  97.   right: -40%;
  98. }
  99. }
  100. @-moz-keyframes shopping0 {
  101. 0% {
  102.   top: 50%;
  103.   right: 100%;
  104. }
  105. 8%,
  106. 14% {
  107.   top: 50%;
  108.   right: 85%;
  109. }
  110. 17%,
  111. 20% {
  112.   top: 50%;
  113.   right: 80%;
  114. }
  115. 23%,
  116. 26% {
  117.   top: 50%;
  118.   right: 75%;
  119. }
  120. 29%,
  121. 33% {
  122.   top: 50%;
  123.   right: 70%;
  124. }
  125. 36%,
  126. 39% {
  127.   top: 50%;
  128.   right: 65%;
  129. }
  130. 49%,
  131. 53% {
  132.   top: 10%;
  133.   right: 34%;
  134. }
  135. 68%,
  136. 72% {
  137.   top: 10%;
  138.   right: 12%;
  139. }
  140. 77%,
  141. 85% {
  142.   top: 10%;
  143.   right: 6.5%;
  144. }
  145. 100% {
  146.   top: 10%;
  147.   right: -40%;
  148. }
  149. }
  150. @-ms-keyframes shopping0 {
  151. 0% {
  152.   top: 50%;
  153.   right: 100%;
  154. }
  155. 8%,
  156. 14% {
  157.   top: 50%;
  158.   right: 85%;
  159. }
  160. 17%,
  161. 20% {
  162.   top: 50%;
  163.   right: 80%;
  164. }
  165. 23%,
  166. 26% {
  167.   top: 50%;
  168.   right: 75%;
  169. }
  170. 29%,
  171. 33% {
  172.   top: 50%;
  173.   right: 70%;
  174. }
  175. 36%,
  176. 39% {
  177.   top: 50%;
  178.   right: 65%;
  179. }
  180. 49%,
  181. 53% {
  182.   top: 10%;
  183.   right: 34%;
  184. }
  185. 68%,
  186. 72% {
  187.   top: 10%;
  188.   right: 12%;
  189. }
  190. 77%,
  191. 85% {
  192.   top: 10%;
  193.   right: 6.5%;
  194. }
  195. 100% {
  196.   top: 10%;
  197.   right: -40%;
  198. }
  199. }
  200. @-o-keyframes shopping0 {
  201. 0% {
  202.   top: 50%;
  203.   right: 100%;
  204. }
  205. 8%,
  206. 14% {
  207.   top: 50%;
  208.   right: 85%;
  209. }
  210. 17%,
  211. 20% {
  212.   top: 50%;
  213.   right: 80%;
  214. }
  215. 23%,
  216. 26% {
  217.   top: 50%;
  218.   right: 75%;
  219. }
  220. 29%,
  221. 33% {
  222.   top: 50%;
  223.   right: 70%;
  224. }
  225. 36%,
  226. 39% {
  227.   top: 50%;
  228.   right: 65%;
  229. }
  230. 49%,
  231. 53% {
  232.   top: 10%;
  233.   right: 34%;
  234. }
  235. 68%,
  236. 72% {
  237.   top: 10%;
  238.   right: 12%;
  239. }
  240. 77%,
  241. 85% {
  242.   top: 10%;
  243.   right: 6.5%;
  244. }
  245. 100% {
  246.   top: 10%;
  247.   right: -40%;
  248. }
  249. }
  250. @keyframes shopping0 {
  251. 0% {
  252.   top: 50%;
  253.   right: 100%;
  254. }
  255. 8%,
  256. 14% {
  257.   top: 50%;
  258.   right: 85%;
  259. }
  260. 17%,
  261. 20% {
  262.   top: 50%;
  263.   right: 80%;
  264. }
  265. 23%,
  266. 26% {
  267.   top: 50%;
  268.   right: 75%;
  269. }
  270. 29%,
  271. 33% {
  272.   top: 50%;
  273.   right: 70%;
  274. }
  275. 36%,
  276. 39% {
  277.   top: 50%;
  278.   right: 65%;
  279. }
  280. 49%,
  281. 53% {
  282.   top: 10%;
  283.   right: 34%;
  284. }
  285. 68%,
  286. 72% {
  287.   top: 10%;
  288.   right: 12%;
  289. }
  290. 77%,
  291. 85% {
  292.   top: 10%;
  293.   right: 6.5%;
  294. }
  295. 100% {
  296.   top: 10%;
  297.   right: -40%;
  298. }
  299. }
  300. #customer0, #customer5 {
  301.   -webkit-animation: shopping0 10s linear 0s infinite;
  302.   -moz-animation: shopping0 10s linear 0s infinite;
  303.   -ms-animation: shopping0 10s linear 0s infinite;
  304.   -o-animation: shopping0 10s linear 0s infinite;
  305.   animation: shopping0 10s linear 0s infinite;
  306. }
  307. #customer5 {
  308.   -webkit-animation-delay: 5s;
  309. }
  310. #checkout0 {
  311.   top: 10%;
  312. }
  313. @-webkit-keyframes shopping1 {
  314. 0% {
  315.   top: 50%;
  316.   right: 100%;
  317. }
  318. 8%,
  319. 14% {
  320.   top: 50%;
  321.   right: 85%;
  322. }
  323. 17%,
  324. 20% {
  325.   top: 50%;
  326.   right: 80%;
  327. }
  328. 23%,
  329. 26% {
  330.   top: 50%;
  331.   right: 75%;
  332. }
  333. 29%,
  334. 33% {
  335.   top: 50%;
  336.   right: 70%;
  337. }
  338. 36%,
  339. 39% {
  340.   top: 50%;
  341.   right: 65%;
  342. }
  343. 49%,
  344. 53% {
  345.   top: 30%;
  346.   right: 34%;
  347. }
  348. 68%,
  349. 72% {
  350.   top: 30%;
  351.   right: 12%;
  352. }
  353. 77%,
  354. 85% {
  355.   top: 30%;
  356.   right: 6.5%;
  357. }
  358. 100% {
  359.   top: 30%;
  360.   right: -40%;
  361. }
  362. }
  363. @-moz-keyframes shopping1 {
  364. 0% {
  365.   top: 50%;
  366.   right: 100%;
  367. }
  368. 8%,
  369. 14% {
  370.   top: 50%;
  371.   right: 85%;
  372. }
  373. 17%,
  374. 20% {
  375.   top: 50%;
  376.   right: 80%;
  377. }
  378. 23%,
  379. 26% {
  380.   top: 50%;
  381.   right: 75%;
  382. }
  383. 29%,
  384. 33% {
  385.   top: 50%;
  386.   right: 70%;
  387. }
  388. 36%,
  389. 39% {
  390.   top: 50%;
  391.   right: 65%;
  392. }
  393. 49%,
  394. 53% {
  395.   top: 30%;
  396.   right: 34%;
  397. }
  398. 68%,
  399. 72% {
  400.   top: 30%;
  401.   right: 12%;
  402. }
  403. 77%,
  404. 85% {
  405.   top: 30%;
  406.   right: 6.5%;
  407. }
  408. 100% {
  409.   top: 30%;
  410.   right: -40%;
  411. }
  412. }
  413. @-ms-keyframes shopping1 {
  414. 0% {
  415.   top: 50%;
  416.   right: 100%;
  417. }
  418. 8%,
  419. 14% {
  420.   top: 50%;
  421.   right: 85%;
  422. }
  423. 17%,
  424. 20% {
  425.   top: 50%;
  426.   right: 80%;
  427. }
  428. 23%,
  429. 26% {
  430.   top: 50%;
  431.   right: 75%;
  432. }
  433. 29%,
  434. 33% {
  435.   top: 50%;
  436.   right: 70%;
  437. }
  438. 36%,
  439. 39% {
  440.   top: 50%;
  441.   right: 65%;
  442. }
  443. 49%,
  444. 53% {
  445.   top: 30%;
  446.   right: 34%;
  447. }
  448. 68%,
  449. 72% {
  450.   top: 30%;
  451.   right: 12%;
  452. }
  453. 77%,
  454. 85% {
  455.   top: 30%;
  456.   right: 6.5%;
  457. }
  458. 100% {
  459.   top: 30%;
  460.   right: -40%;
  461. }
  462. }
  463. @-o-keyframes shopping1 {
  464. 0% {
  465.   top: 50%;
  466.   right: 100%;
  467. }
  468. 8%,
  469. 14% {
  470.   top: 50%;
  471.   right: 85%;
  472. }
  473. 17%,
  474. 20% {
  475.   top: 50%;
  476.   right: 80%;
  477. }
  478. 23%,
  479. 26% {
  480.   top: 50%;
  481.   right: 75%;
  482. }
  483. 29%,
  484. 33% {
  485.   top: 50%;
  486.   right: 70%;
  487. }
  488. 36%,
  489. 39% {
  490.   top: 50%;
  491.   right: 65%;
  492. }
  493. 49%,
  494. 53% {
  495.   top: 30%;
  496.   right: 34%;
  497. }
  498. 68%,
  499. 72% {
  500.   top: 30%;
  501.   right: 12%;
  502. }
  503. 77%,
  504. 85% {
  505.   top: 30%;
  506.   right: 6.5%;
  507. }
  508. 100% {
  509.   top: 30%;
  510.   right: -40%;
  511. }
  512. }
  513. @keyframes shopping1 {
  514. 0% {
  515.   top: 50%;
  516.   right: 100%;
  517. }
  518. 8%,
  519. 14% {
  520.   top: 50%;
  521.   right: 85%;
  522. }
  523. 17%,
  524. 20% {
  525.   top: 50%;
  526.   right: 80%;
  527. }
  528. 23%,
  529. 26% {
  530.   top: 50%;
  531.   right: 75%;
  532. }
  533. 29%,
  534. 33% {
  535.   top: 50%;
  536.   right: 70%;
  537. }
  538. 36%,
  539. 39% {
  540.   top: 50%;
  541.   right: 65%;
  542. }
  543. 49%,
  544. 53% {
  545.   top: 30%;
  546.   right: 34%;
  547. }
  548. 68%,
  549. 72% {
  550.   top: 30%;
  551.   right: 12%;
  552. }
  553. 77%,
  554. 85% {
  555.   top: 30%;
  556.   right: 6.5%;
  557. }
  558. 100% {
  559.   top: 30%;
  560.   right: -40%;
  561. }
  562. }
  563. #customer1, #customer6 {
  564.   -webkit-animation: shopping1 10s linear 1s infinite;
  565.   -moz-animation: shopping1 10s linear 1s infinite;
  566.   -ms-animation: shopping1 10s linear 1s infinite;
  567.   -o-animation: shopping1 10s linear 1s infinite;
  568.   animation: shopping1 10s linear 1s infinite;
  569. }
  570. #customer6 {
  571.   -webkit-animation-delay: 6s;
  572. }
  573. #checkout1 {
  574.   top: 30%;
  575. }
  576. @-webkit-keyframes shopping2 {
  577. 0% {
  578.   top: 50%;
  579.   right: 100%;
  580. }
  581. 8%,
  582. 14% {
  583.   top: 50%;
  584.   right: 85%;
  585. }
  586. 17%,
  587. 20% {
  588.   top: 50%;
  589.   right: 80%;
  590. }
  591. 23%,
  592. 26% {
  593.   top: 50%;
  594.   right: 75%;
  595. }
  596. 29%,
  597. 33% {
  598.   top: 50%;
  599.   right: 70%;
  600. }
  601. 36%,
  602. 39% {
  603.   top: 50%;
  604.   right: 65%;
  605. }
  606. 49%,
  607. 53% {
  608.   top: 50%;
  609.   right: 34%;
  610. }
  611. 68%,
  612. 72% {
  613.   top: 50%;
  614.   right: 12%;
  615. }
  616. 77%,
  617. 85% {
  618.   top: 50%;
  619.   right: 6.5%;
  620. }
  621. 100% {
  622.   top: 50%;
  623.   right: -40%;
  624. }
  625. }
  626. @-moz-keyframes shopping2 {
  627. 0% {
  628.   top: 50%;
  629.   right: 100%;
  630. }
  631. 8%,
  632. 14% {
  633.   top: 50%;
  634.   right: 85%;
  635. }
  636. 17%,
  637. 20% {
  638.   top: 50%;
  639.   right: 80%;
  640. }
  641. 23%,
  642. 26% {
  643.   top: 50%;
  644.   right: 75%;
  645. }
  646. 29%,
  647. 33% {
  648.   top: 50%;
  649.   right: 70%;
  650. }
  651. 36%,
  652. 39% {
  653.   top: 50%;
  654.   right: 65%;
  655. }
  656. 49%,
  657. 53% {
  658.   top: 50%;
  659.   right: 34%;
  660. }
  661. 68%,
  662. 72% {
  663.   top: 50%;
  664.   right: 12%;
  665. }
  666. 77%,
  667. 85% {
  668.   top: 50%;
  669.   right: 6.5%;
  670. }
  671. 100% {
  672.   top: 50%;
  673.   right: -40%;
  674. }
  675. }
  676. @-ms-keyframes shopping2 {
  677. 0% {
  678.   top: 50%;
  679.   right: 100%;
  680. }
  681. 8%,
  682. 14% {
  683.   top: 50%;
  684.   right: 85%;
  685. }
  686. 17%,
  687. 20% {
  688.   top: 50%;
  689.   right: 80%;
  690. }
  691. 23%,
  692. 26% {
  693.   top: 50%;
  694.   right: 75%;
  695. }
  696. 29%,
  697. 33% {
  698.   top: 50%;
  699.   right: 70%;
  700. }
  701. 36%,
  702. 39% {
  703.   top: 50%;
  704.   right: 65%;
  705. }
  706. 49%,
  707. 53% {
  708.   top: 50%;
  709.   right: 34%;
  710. }
  711. 68%,
  712. 72% {
  713.   top: 50%;
  714.   right: 12%;
  715. }
  716. 77%,
  717. 85% {
  718.   top: 50%;
  719.   right: 6.5%;
  720. }
  721. 100% {
  722.   top: 50%;
  723.   right: -40%;
  724. }
  725. }
  726. @-o-keyframes shopping2 {
  727. 0% {
  728.   top: 50%;
  729.   right: 100%;
  730. }
  731. 8%,
  732. 14% {
  733.   top: 50%;
  734.   right: 85%;
  735. }
  736. 17%,
  737. 20% {
  738.   top: 50%;
  739.   right: 80%;
  740. }
  741. 23%,
  742. 26% {
  743.   top: 50%;
  744.   right: 75%;
  745. }
  746. 29%,
  747. 33% {
  748.   top: 50%;
  749.   right: 70%;
  750. }
  751. 36%,
  752. 39% {
  753.   top: 50%;
  754.   right: 65%;
  755. }
  756. 49%,
  757. 53% {
  758.   top: 50%;
  759.   right: 34%;
  760. }
  761. 68%,
  762. 72% {
  763.   top: 50%;
  764.   right: 12%;
  765. }
  766. 77%,
  767. 85% {
  768.   top: 50%;
  769.   right: 6.5%;
  770. }
  771. 100% {
  772.   top: 50%;
  773.   right: -40%;
  774. }
  775. }
  776. @keyframes shopping2 {
  777. 0% {
  778.   top: 50%;
  779.   right: 100%;
  780. }
  781. 8%,
  782. 14% {
  783.   top: 50%;
  784.   right: 85%;
  785. }
  786. 17%,
  787. 20% {
  788.   top: 50%;
  789.   right: 80%;
  790. }
  791. 23%,
  792. 26% {
  793.   top: 50%;
  794.   right: 75%;
  795. }
  796. 29%,
  797. 33% {
  798.   top: 50%;
  799.   right: 70%;
  800. }
  801. 36%,
  802. 39% {
  803.   top: 50%;
  804.   right: 65%;
  805. }
  806. 49%,
  807. 53% {
  808.   top: 50%;
  809.   right: 34%;
  810. }
  811. 68%,
  812. 72% {
  813.   top: 50%;
  814.   right: 12%;
  815. }
  816. 77%,
  817. 85% {
  818.   top: 50%;
  819.   right: 6.5%;
  820. }
  821. 100% {
  822.   top: 50%;
  823.   right: -40%;
  824. }
  825. }
  826. #customer2, #customer7 {
  827.   -webkit-animation: shopping2 10s linear 2s infinite;
  828.   -moz-animation: shopping2 10s linear 2s infinite;
  829.   -ms-animation: shopping2 10s linear 2s infinite;
  830.   -o-animation: shopping2 10s linear 2s infinite;
  831.   animation: shopping2 10s linear 2s infinite;
  832. }
  833. #customer7 {
  834.   -webkit-animation-delay: 7s;
  835. }
  836. #checkout2 {
  837.   top: 50%;
  838. }
  839. @-webkit-keyframes shopping3 {
  840. 0% {
  841.   top: 50%;
  842.   right: 100%;
  843. }
  844. 8%,
  845. 14% {
  846.   top: 50%;
  847.   right: 85%;
  848. }
  849. 17%,
  850. 20% {
  851.   top: 50%;
  852.   right: 80%;
  853. }
  854. 23%,
  855. 26% {
  856.   top: 50%;
  857.   right: 75%;
  858. }
  859. 29%,
  860. 33% {
  861.   top: 50%;
  862.   right: 70%;
  863. }
  864. 36%,
  865. 39% {
  866.   top: 50%;
  867.   right: 65%;
  868. }
  869. 49%,
  870. 53% {
  871.   top: 70%;
  872.   right: 34%;
  873. }
  874. 68%,
  875. 72% {
  876.   top: 70%;
  877.   right: 12%;
  878. }
  879. 77%,
  880. 85% {
  881.   top: 70%;
  882.   right: 6.5%;
  883. }
  884. 100% {
  885.   top: 70%;
  886.   right: -40%;
  887. }
  888. }
  889. @-moz-keyframes shopping3 {
  890. 0% {
  891.   top: 50%;
  892.   right: 100%;
  893. }
  894. 8%,
  895. 14% {
  896.   top: 50%;
  897.   right: 85%;
  898. }
  899. 17%,
  900. 20% {
  901.   top: 50%;
  902.   right: 80%;
  903. }
  904. 23%,
  905. 26% {
  906.   top: 50%;
  907.   right: 75%;
  908. }
  909. 29%,
  910. 33% {
  911.   top: 50%;
  912.   right: 70%;
  913. }
  914. 36%,
  915. 39% {
  916.   top: 50%;
  917.   right: 65%;
  918. }
  919. 49%,
  920. 53% {
  921.   top: 70%;
  922.   right: 34%;
  923. }
  924. 68%,
  925. 72% {
  926.   top: 70%;
  927.   right: 12%;
  928. }
  929. 77%,
  930. 85% {
  931.   top: 70%;
  932.   right: 6.5%;
  933. }
  934. 100% {
  935.   top: 70%;
  936.   right: -40%;
  937. }
  938. }
  939. @-ms-keyframes shopping3 {
  940. 0% {
  941.   top: 50%;
  942.   right: 100%;
  943. }
  944. 8%,
  945. 14% {
  946.   top: 50%;
  947.   right: 85%;
  948. }
  949. 17%,
  950. 20% {
  951.   top: 50%;
  952.   right: 80%;
  953. }
  954. 23%,
  955. 26% {
  956.   top: 50%;
  957.   right: 75%;
  958. }
  959. 29%,
  960. 33% {
  961.   top: 50%;
  962.   right: 70%;
  963. }
  964. 36%,
  965. 39% {
  966.   top: 50%;
  967.   right: 65%;
  968. }
  969. 49%,
  970. 53% {
  971.   top: 70%;
  972.   right: 34%;
  973. }
  974. 68%,
  975. 72% {
  976.   top: 70%;
  977.   right: 12%;
  978. }
  979. 77%,
  980. 85% {
  981.   top: 70%;
  982.   right: 6.5%;
  983. }
  984. 100% {
  985.   top: 70%;
  986.   right: -40%;
  987. }
  988. }
  989. @-o-keyframes shopping3 {
  990. 0% {
  991.   top: 50%;
  992.   right: 100%;
  993. }
  994. 8%,
  995. 14% {
  996.   top: 50%;
  997.   right: 85%;
  998. }
  999. 17%,
  1000. 20% {
  1001.   top: 50%;
  1002.   right: 80%;
  1003. }
  1004. 23%,
  1005. 26% {
  1006.   top: 50%;
  1007.   right: 75%;
  1008. }
  1009. 29%,
  1010. 33% {
  1011.   top: 50%;
  1012.   right: 70%;
  1013. }
  1014. 36%,
  1015. 39% {
  1016.   top: 50%;
  1017.   right: 65%;
  1018. }
  1019. 49%,
  1020. 53% {
  1021.   top: 70%;
  1022.   right: 34%;
  1023. }
  1024. 68%,
  1025. 72% {
  1026.   top: 70%;
  1027.   right: 12%;
  1028. }
  1029. 77%,
  1030. 85% {
  1031.   top: 70%;
  1032.   right: 6.5%;
  1033. }
  1034. 100% {
  1035.   top: 70%;
  1036.   right: -40%;
  1037. }
  1038. }
  1039. @keyframes shopping3 {
  1040. 0% {
  1041.   top: 50%;
  1042.   right: 100%;
  1043. }
  1044. 8%,
  1045. 14% {
  1046.   top: 50%;
  1047.   right: 85%;
  1048. }
  1049. 17%,
  1050. 20% {
  1051.   top: 50%;
  1052.   right: 80%;
  1053. }
  1054. 23%,
  1055. 26% {
  1056.   top: 50%;
  1057.   right: 75%;
  1058. }
  1059. 29%,
  1060. 33% {
  1061.   top: 50%;
  1062.   right: 70%;
  1063. }
  1064. 36%,
  1065. 39% {
  1066.   top: 50%;
  1067.   right: 65%;
  1068. }
  1069. 49%,
  1070. 53% {
  1071.   top: 70%;
  1072.   right: 34%;
  1073. }
  1074. 68%,
  1075. 72% {
  1076.   top: 70%;
  1077.   right: 12%;
  1078. }
  1079. 77%,
  1080. 85% {
  1081.   top: 70%;
  1082.   right: 6.5%;
  1083. }
  1084. 100% {
  1085.   top: 70%;
  1086.   right: -40%;
  1087. }
  1088. }
  1089. #customer3, #customer8 {
  1090.   -webkit-animation: shopping3 10s linear 3s infinite;
  1091.   -moz-animation: shopping3 10s linear 3s infinite;
  1092.   -ms-animation: shopping3 10s linear 3s infinite;
  1093.   -o-animation: shopping3 10s linear 3s infinite;
  1094.   animation: shopping3 10s linear 3s infinite;
  1095. }
  1096. #customer8 {
  1097.   -webkit-animation-delay: 8s;
  1098. }
  1099. #checkout3 {
  1100.   top: 70%;
  1101. }
  1102. @-webkit-keyframes shopping4 {
  1103. 0% {
  1104.   top: 50%;
  1105.   right: 100%;
  1106. }
  1107. 8%,
  1108. 14% {
  1109.   top: 50%;
  1110.   right: 85%;
  1111. }
  1112. 17%,
  1113. 20% {
  1114.   top: 50%;
  1115.   right: 80%;
  1116. }
  1117. 23%,
  1118. 26% {
  1119.   top: 50%;
  1120.   right: 75%;
  1121. }
  1122. 29%,
  1123. 33% {
  1124.   top: 50%;
  1125.   right: 70%;
  1126. }
  1127. 36%,
  1128. 39% {
  1129.   top: 50%;
  1130.   right: 65%;
  1131. }
  1132. 49%,
  1133. 53% {
  1134.   top: 90%;
  1135.   right: 34%;
  1136. }
  1137. 68%,
  1138. 72% {
  1139.   top: 90%;
  1140.   right: 12%;
  1141. }
  1142. 77%,
  1143. 85% {
  1144.   top: 90%;
  1145.   right: 6.5%;
  1146. }
  1147. 100% {
  1148.   top: 90%;
  1149.   right: -40%;
  1150. }
  1151. }
  1152. @-moz-keyframes shopping4 {
  1153. 0% {
  1154.   top: 50%;
  1155.   right: 100%;
  1156. }
  1157. 8%,
  1158. 14% {
  1159.   top: 50%;
  1160.   right: 85%;
  1161. }
  1162. 17%,
  1163. 20% {
  1164.   top: 50%;
  1165.   right: 80%;
  1166. }
  1167. 23%,
  1168. 26% {
  1169.   top: 50%;
  1170.   right: 75%;
  1171. }
  1172. 29%,
  1173. 33% {
  1174.   top: 50%;
  1175.   right: 70%;
  1176. }
  1177. 36%,
  1178. 39% {
  1179.   top: 50%;
  1180.   right: 65%;
  1181. }
  1182. 49%,
  1183. 53% {
  1184.   top: 90%;
  1185.   right: 34%;
  1186. }
  1187. 68%,
  1188. 72% {
  1189.   top: 90%;
  1190.   right: 12%;
  1191. }
  1192. 77%,
  1193. 85% {
  1194.   top: 90%;
  1195.   right: 6.5%;
  1196. }
  1197. 100% {
  1198.   top: 90%;
  1199.   right: -40%;
  1200. }
  1201. }
  1202. @-ms-keyframes shopping4 {
  1203. 0% {
  1204.   top: 50%;
  1205.   right: 100%;
  1206. }
  1207. 8%,
  1208. 14% {
  1209.   top: 50%;
  1210.   right: 85%;
  1211. }
  1212. 17%,
  1213. 20% {
  1214.   top: 50%;
  1215.   right: 80%;
  1216. }
  1217. 23%,
  1218. 26% {
  1219.   top: 50%;
  1220.   right: 75%;
  1221. }
  1222. 29%,
  1223. 33% {
  1224.   top: 50%;
  1225.   right: 70%;
  1226. }
  1227. 36%,
  1228. 39% {
  1229.   top: 50%;
  1230.   right: 65%;
  1231. }
  1232. 49%,
  1233. 53% {
  1234.   top: 90%;
  1235.   right: 34%;
  1236. }
  1237. 68%,
  1238. 72% {
  1239.   top: 90%;
  1240.   right: 12%;
  1241. }
  1242. 77%,
  1243. 85% {
  1244.   top: 90%;
  1245.   right: 6.5%;
  1246. }
  1247. 100% {
  1248.   top: 90%;
  1249.   right: -40%;
  1250. }
  1251. }
  1252. @-o-keyframes shopping4 {
  1253. 0% {
  1254.   top: 50%;
  1255.   right: 100%;
  1256. }
  1257. 8%,
  1258. 14% {
  1259.   top: 50%;
  1260.   right: 85%;
  1261. }
  1262. 17%,
  1263. 20% {
  1264.   top: 50%;
  1265.   right: 80%;
  1266. }
  1267. 23%,
  1268. 26% {
  1269.   top: 50%;
  1270.   right: 75%;
  1271. }
  1272. 29%,
  1273. 33% {
  1274.   top: 50%;
  1275.   right: 70%;
  1276. }
  1277. 36%,
  1278. 39% {
  1279.   top: 50%;
  1280.   right: 65%;
  1281. }
  1282. 49%,
  1283. 53% {
  1284.   top: 90%;
  1285.   right: 34%;
  1286. }
  1287. 68%,
  1288. 72% {
  1289.   top: 90%;
  1290.   right: 12%;
  1291. }
  1292. 77%,
  1293. 85% {
  1294.   top: 90%;
  1295.   right: 6.5%;
  1296. }
  1297. 100% {
  1298.   top: 90%;
  1299.   right: -40%;
  1300. }
  1301. }
  1302. @keyframes shopping4 {
  1303. 0% {
  1304.   top: 50%;
  1305.   right: 100%;
  1306. }
  1307. 8%,
  1308. 14% {
  1309.   top: 50%;
  1310.   right: 85%;
  1311. }
  1312. 17%,
  1313. 20% {
  1314.   top: 50%;
  1315.   right: 80%;
  1316. }
  1317. 23%,
  1318. 26% {
  1319.   top: 50%;
  1320.   right: 75%;
  1321. }
  1322. 29%,
  1323. 33% {
  1324.   top: 50%;
  1325.   right: 70%;
  1326. }
  1327. 36%,
  1328. 39% {
  1329.   top: 50%;
  1330.   right: 65%;
  1331. }
  1332. 49%,
  1333. 53% {
  1334.   top: 90%;
  1335.   right: 34%;
  1336. }
  1337. 68%,
  1338. 72% {
  1339.   top: 90%;
  1340.   right: 12%;
  1341. }
  1342. 77%,
  1343. 85% {
  1344.   top: 90%;
  1345.   right: 6.5%;
  1346. }
  1347. 100% {
  1348.   top: 90%;
  1349.   right: -40%;
  1350. }
  1351. }
  1352. #customer4, #customer9 {
  1353.   -webkit-animation: shopping4 10s linear 4s infinite;
  1354.   -moz-animation: shopping4 10s linear 4s infinite;
  1355.   -ms-animation: shopping4 10s linear 4s infinite;
  1356.   -o-animation: shopping4 10s linear 4s infinite;
  1357.   animation: shopping4 10s linear 4s infinite;
  1358. }
  1359. #customer9 {
  1360.   -webkit-animation-delay: 9s;
  1361. }
  1362. #checkout4 {
  1363.   top: 90%;
  1364. }