<div class="wrapper"> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball one"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball two"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball three"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball four"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball five"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> <div class="ball six"></div> </div> body { background: #2D3047; } .wrapper { position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .wrapper .ball { position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; border-radius: 100%; -webkit-animation-name: swing; animation-name: swing; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; visibility: hidden; } .wrapper .ball.one { background: #07BEB8; } .wrapper .ball.two { background: #FFFD82; } .wrapper .ball.three { background: #FF9B71; } .wrapper .ball.four { background: #07BEB8; } .wrapper .ball.five { background: #FFFD82; } .wrapper .ball.six { background: #FF9B71; } .wrapper .ball.one:nth-child(1) { -webkit-animation-delay: 0.01s; animation-delay: 0.01s; opacity: 0.49; } .wrapper .ball.two:nth-child(51) { -webkit-animation-delay: 0.76s; animation-delay: 0.76s; opacity: 0.49; } .wrapper .ball.three:nth-child(101) { -webkit-animation-delay: 1.51s; animation-delay: 1.51s; opacity: 0.49; } .wrapper .ball.four:nth-child(151) { -webkit-animation-delay: 2.26s; animation-delay: 2.26s; opacity: 0.49; } .wrapper .ball.five:nth-child(201) { -webkit-animation-delay: 3.01s; animation-delay: 3.01s; opacity: 0.49; } .wrapper .ball.six:nth-child(251) { -webkit-animation-delay: 3.76s; animation-delay: 3.76s; opacity: 0.49; } .wrapper .ball.one:nth-child(2) { -webkit-animation-delay: 0.02s; animation-delay: 0.02s; opacity: 0.48; } .wrapper .ball.two:nth-child(52) { -webkit-animation-delay: 0.77s; animation-delay: 0.77s; opacity: 0.48; } .wrapper .ball.three:nth-child(102) { -webkit-animation-delay: 1.52s; animation-delay: 1.52s; opacity: 0.48; } .wrapper .ball.four:nth-child(152) { -webkit-animation-delay: 2.27s; animation-delay: 2.27s; opacity: 0.48; } .wrapper .ball.five:nth-child(202) { -webkit-animation-delay: 3.02s; animation-delay: 3.02s; opacity: 0.48; } .wrapper .ball.six:nth-child(252) { -webkit-animation-delay: 3.77s; animation-delay: 3.77s; opacity: 0.48; } .wrapper .ball.one:nth-child(3) { -webkit-animation-delay: 0.03s; animation-delay: 0.03s; opacity: 0.47; } .wrapper .ball.two:nth-child(53) { -webkit-animation-delay: 0.78s; animation-delay: 0.78s; opacity: 0.47; } .wrapper .ball.three:nth-child(103) { -webkit-animation-delay: 1.53s; animation-delay: 1.53s; opacity: 0.47; } .wrapper .ball.four:nth-child(153) { -webkit-animation-delay: 2.28s; animation-delay: 2.28s; opacity: 0.47; } .wrapper .ball.five:nth-child(203) { -webkit-animation-delay: 3.03s; animation-delay: 3.03s; opacity: 0.47; } .wrapper .ball.six:nth-child(253) { -webkit-animation-delay: 3.78s; animation-delay: 3.78s; opacity: 0.47; } .wrapper .ball.one:nth-child(4) { -webkit-animation-delay: 0.04s; animation-delay: 0.04s; opacity: 0.46; } .wrapper .ball.two:nth-child(54) { -webkit-animation-delay: 0.79s; animation-delay: 0.79s; opacity: 0.46; } .wrapper .ball.three:nth-child(104) { -webkit-animation-delay: 1.54s; animation-delay: 1.54s; opacity: 0.46; } .wrapper .ball.four:nth-child(154) { -webkit-animation-delay: 2.29s; animation-delay: 2.29s; opacity: 0.46; } .wrapper .ball.five:nth-child(204) { -webkit-animation-delay: 3.04s; animation-delay: 3.04s; opacity: 0.46; } .wrapper .ball.six:nth-child(254) { -webkit-animation-delay: 3.79s; animation-delay: 3.79s; opacity: 0.46; } .wrapper .ball.one:nth-child(5) { -webkit-animation-delay: 0.05s; animation-delay: 0.05s; opacity: 0.45; } .wrapper .ball.two:nth-child(55) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; opacity: 0.45; } .wrapper .ball.three:nth-child(105) { -webkit-animation-delay: 1.55s; animation-delay: 1.55s; opacity: 0.45; } .wrapper .ball.four:nth-child(155) { -webkit-animation-delay: 2.3s; animation-delay: 2.3s; opacity: 0.45; } .wrapper .ball.five:nth-child(205) { -webkit-animation-delay: 3.05s; animation-delay: 3.05s; opacity: 0.45; } .wrapper .ball.six:nth-child(255) { -webkit-animation-delay: 3.8s; animation-delay: 3.8s; opacity: 0.45; } .wrapper .ball.one:nth-child(6) { -webkit-animation-delay: 0.06s; animation-delay: 0.06s; opacity: 0.44; } .wrapper .ball.two:nth-child(56) { -webkit-animation-delay: 0.81s; animation-delay: 0.81s; opacity: 0.44; } .wrapper .ball.three:nth-child(106) { -webkit-animation-delay: 1.56s; animation-delay: 1.56s; opacity: 0.44; } .wrapper .ball.four:nth-child(156) { -webkit-animation-delay: 2.31s; animation-delay: 2.31s; opacity: 0.44; } .wrapper .ball.five:nth-child(206) { -webkit-animation-delay: 3.06s; animation-delay: 3.06s; opacity: 0.44; } .wrapper .ball.six:nth-child(256) { -webkit-animation-delay: 3.81s; animation-delay: 3.81s; opacity: 0.44; } .wrapper .ball.one:nth-child(7) { -webkit-animation-delay: 0.07s; animation-delay: 0.07s; opacity: 0.43; } .wrapper .ball.two:nth-child(57) { -webkit-animation-delay: 0.82s; animation-delay: 0.82s; opacity: 0.43; } .wrapper .ball.three:nth-child(107) { -webkit-animation-delay: 1.57s; animation-delay: 1.57s; opacity: 0.43; } .wrapper .ball.four:nth-child(157) { -webkit-animation-delay: 2.32s; animation-delay: 2.32s; opacity: 0.43; } .wrapper .ball.five:nth-child(207) { -webkit-animation-delay: 3.07s; animation-delay: 3.07s; opacity: 0.43; } .wrapper .ball.six:nth-child(257) { -webkit-animation-delay: 3.82s; animation-delay: 3.82s; opacity: 0.43; } .wrapper .ball.one:nth-child(8) { -webkit-animation-delay: 0.08s; animation-delay: 0.08s; opacity: 0.42; } .wrapper .ball.two:nth-child(58) { -webkit-animation-delay: 0.83s; animation-delay: 0.83s; opacity: 0.42; } .wrapper .ball.three:nth-child(108) { -webkit-animation-delay: 1.58s; animation-delay: 1.58s; opacity: 0.42; } .wrapper .ball.four:nth-child(158) { -webkit-animation-delay: 2.33s; animation-delay: 2.33s; opacity: 0.42; } .wrapper .ball.five:nth-child(208) { -webkit-animation-delay: 3.08s; animation-delay: 3.08s; opacity: 0.42; } .wrapper .ball.six:nth-child(258) { -webkit-animation-delay: 3.83s; animation-delay: 3.83s; opacity: 0.42; } .wrapper .ball.one:nth-child(9) { -webkit-animation-delay: 0.09s; animation-delay: 0.09s; opacity: 0.41; } .wrapper .ball.two:nth-child(59) { -webkit-animation-delay: 0.84s; animation-delay: 0.84s; opacity: 0.41; } .wrapper .ball.three:nth-child(109) { -webkit-animation-delay: 1.59s; animation-delay: 1.59s; opacity: 0.41; } .wrapper .ball.four:nth-child(159) { -webkit-animation-delay: 2.34s; animation-delay: 2.34s; opacity: 0.41; } .wrapper .ball.five:nth-child(209) { -webkit-animation-delay: 3.09s; animation-delay: 3.09s; opacity: 0.41; } .wrapper .ball.six:nth-child(259) { -webkit-animation-delay: 3.84s; animation-delay: 3.84s; opacity: 0.41; } .wrapper .ball.one:nth-child(10) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; opacity: 0.4; } .wrapper .ball.two:nth-child(60) { -webkit-animation-delay: 0.85s; animation-delay: 0.85s; opacity: 0.4; } .wrapper .ball.three:nth-child(110) { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; opacity: 0.4; } .wrapper .ball.four:nth-child(160) { -webkit-animation-delay: 2.35s; animation-delay: 2.35s; opacity: 0.4; } .wrapper .ball.five:nth-child(210) { -webkit-animation-delay: 3.1s; animation-delay: 3.1s; opacity: 0.4; } .wrapper .ball.six:nth-child(260) { -webkit-animation-delay: 3.85s; animation-delay: 3.85s; opacity: 0.4; } .wrapper .ball.one:nth-child(11) { -webkit-animation-delay: 0.11s; animation-delay: 0.11s; opacity: 0.39; } .wrapper .ball.two:nth-child(61) { -webkit-animation-delay: 0.86s; animation-delay: 0.86s; opacity: 0.39; } .wrapper .ball.three:nth-child(111) { -webkit-animation-delay: 1.61s; animation-delay: 1.61s; opacity: 0.39; } .wrapper .ball.four:nth-child(161) { -webkit-animation-delay: 2.36s; animation-delay: 2.36s; opacity: 0.39; } .wrapper .ball.five:nth-child(211) { -webkit-animation-delay: 3.11s; animation-delay: 3.11s; opacity: 0.39; } .wrapper .ball.six:nth-child(261) { -webkit-animation-delay: 3.86s; animation-delay: 3.86s; opacity: 0.39; } .wrapper .ball.one:nth-child(12) { -webkit-animation-delay: 0.12s; animation-delay: 0.12s; opacity: 0.38; } .wrapper .ball.two:nth-child(62) { -webkit-animation-delay: 0.87s; animation-delay: 0.87s; opacity: 0.38; } .wrapper .ball.three:nth-child(112) { -webkit-animation-delay: 1.62s; animation-delay: 1.62s; opacity: 0.38; } .wrapper .ball.four:nth-child(162) { -webkit-animation-delay: 2.37s; animation-delay: 2.37s; opacity: 0.38; } .wrapper .ball.five:nth-child(212) { -webkit-animation-delay: 3.12s; animation-delay: 3.12s; opacity: 0.38; } .wrapper .ball.six:nth-child(262) { -webkit-animation-delay: 3.87s; animation-delay: 3.87s; opacity: 0.38; } .wrapper .ball.one:nth-child(13) { -webkit-animation-delay: 0.13s; animation-delay: 0.13s; opacity: 0.37; } .wrapper .ball.two:nth-child(63) { -webkit-animation-delay: 0.88s; animation-delay: 0.88s; opacity: 0.37; } .wrapper .ball.three:nth-child(113) { -webkit-animation-delay: 1.63s; animation-delay: 1.63s; opacity: 0.37; } .wrapper .ball.four:nth-child(163) { -webkit-animation-delay: 2.38s; animation-delay: 2.38s; opacity: 0.37; } .wrapper .ball.five:nth-child(213) { -webkit-animation-delay: 3.13s; animation-delay: 3.13s; opacity: 0.37; } .wrapper .ball.six:nth-child(263) { -webkit-animation-delay: 3.88s; animation-delay: 3.88s; opacity: 0.37; } .wrapper .ball.one:nth-child(14) { -webkit-animation-delay: 0.14s; animation-delay: 0.14s; opacity: 0.36; } .wrapper .ball.two:nth-child(64) { -webkit-animation-delay: 0.89s; animation-delay: 0.89s; opacity: 0.36; } .wrapper .ball.three:nth-child(114) { -webkit-animation-delay: 1.64s; animation-delay: 1.64s; opacity: 0.36; } .wrapper .ball.four:nth-child(164) { -webkit-animation-delay: 2.39s; animation-delay: 2.39s; opacity: 0.36; } .wrapper .ball.five:nth-child(214) { -webkit-animation-delay: 3.14s; animation-delay: 3.14s; opacity: 0.36; } .wrapper .ball.six:nth-child(264) { -webkit-animation-delay: 3.89s; animation-delay: 3.89s; opacity: 0.36; } .wrapper .ball.one:nth-child(15) { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; opacity: 0.35; } .wrapper .ball.two:nth-child(65) { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; opacity: 0.35; } .wrapper .ball.three:nth-child(115) { -webkit-animation-delay: 1.65s; animation-delay: 1.65s; opacity: 0.35; } .wrapper .ball.four:nth-child(165) { -webkit-animation-delay: 2.4s; animation-delay: 2.4s; opacity: 0.35; } .wrapper .ball.five:nth-child(215) { -webkit-animation-delay: 3.15s; animation-delay: 3.15s; opacity: 0.35; } .wrapper .ball.six:nth-child(265) { -webkit-animation-delay: 3.9s; animation-delay: 3.9s; opacity: 0.35; } .wrapper .ball.one:nth-child(16) { -webkit-animation-delay: 0.16s; animation-delay: 0.16s; opacity: 0.34; } .wrapper .ball.two:nth-child(66) { -webkit-animation-delay: 0.91s; animation-delay: 0.91s; opacity: 0.34; } .wrapper .ball.three:nth-child(116) { -webkit-animation-delay: 1.66s; animation-delay: 1.66s; opacity: 0.34; } .wrapper .ball.four:nth-child(166) { -webkit-animation-delay: 2.41s; animation-delay: 2.41s; opacity: 0.34; } .wrapper .ball.five:nth-child(216) { -webkit-animation-delay: 3.16s; animation-delay: 3.16s; opacity: 0.34; } .wrapper .ball.six:nth-child(266) { -webkit-animation-delay: 3.91s; animation-delay: 3.91s; opacity: 0.34; } .wrapper .ball.one:nth-child(17) { -webkit-animation-delay: 0.17s; animation-delay: 0.17s; opacity: 0.33; } .wrapper .ball.two:nth-child(67) { -webkit-animation-delay: 0.92s; animation-delay: 0.92s; opacity: 0.33; } .wrapper .ball.three:nth-child(117) { -webkit-animation-delay: 1.67s; animation-delay: 1.67s; opacity: 0.33; } .wrapper .ball.four:nth-child(167) { -webkit-animation-delay: 2.42s; animation-delay: 2.42s; opacity: 0.33; } .wrapper .ball.five:nth-child(217) { -webkit-animation-delay: 3.17s; animation-delay: 3.17s; opacity: 0.33; } .wrapper .ball.six:nth-child(267) { -webkit-animation-delay: 3.92s; animation-delay: 3.92s; opacity: 0.33; } .wrapper .ball.one:nth-child(18) { -webkit-animation-delay: 0.18s; animation-delay: 0.18s; opacity: 0.32; } .wrapper .ball.two:nth-child(68) { -webkit-animation-delay: 0.93s; animation-delay: 0.93s; opacity: 0.32; } .wrapper .ball.three:nth-child(118) { -webkit-animation-delay: 1.68s; animation-delay: 1.68s; opacity: 0.32; } .wrapper .ball.four:nth-child(168) { -webkit-animation-delay: 2.43s; animation-delay: 2.43s; opacity: 0.32; } .wrapper .ball.five:nth-child(218) { -webkit-animation-delay: 3.18s; animation-delay: 3.18s; opacity: 0.32; } .wrapper .ball.six:nth-child(268) { -webkit-animation-delay: 3.93s; animation-delay: 3.93s; opacity: 0.32; } .wrapper .ball.one:nth-child(19) { -webkit-animation-delay: 0.19s; animation-delay: 0.19s; opacity: 0.31; } .wrapper .ball.two:nth-child(69) { -webkit-animation-delay: 0.94s; animation-delay: 0.94s; opacity: 0.31; } .wrapper .ball.three:nth-child(119) { -webkit-animation-delay: 1.69s; animation-delay: 1.69s; opacity: 0.31; } .wrapper .ball.four:nth-child(169) { -webkit-animation-delay: 2.44s; animation-delay: 2.44s; opacity: 0.31; } .wrapper .ball.five:nth-child(219) { -webkit-animation-delay: 3.19s; animation-delay: 3.19s; opacity: 0.31; } .wrapper .ball.six:nth-child(269) { -webkit-animation-delay: 3.94s; animation-delay: 3.94s; opacity: 0.31; } .wrapper .ball.one:nth-child(20) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; opacity: 0.3; } .wrapper .ball.two:nth-child(70) { -webkit-animation-delay: 0.95s; animation-delay: 0.95s; opacity: 0.3; } .wrapper .ball.three:nth-child(120) { -webkit-animation-delay: 1.7s; animation-delay: 1.7s; opacity: 0.3; } .wrapper .ball.four:nth-child(170) { -webkit-animation-delay: 2.45s; animation-delay: 2.45s; opacity: 0.3; } .wrapper .ball.five:nth-child(220) { -webkit-animation-delay: 3.2s; animation-delay: 3.2s; opacity: 0.3; } .wrapper .ball.six:nth-child(270) { -webkit-animation-delay: 3.95s; animation-delay: 3.95s; opacity: 0.3; } .wrapper .ball.one:nth-child(21) { -webkit-animation-delay: 0.21s; animation-delay: 0.21s; opacity: 0.29; } .wrapper .ball.two:nth-child(71) { -webkit-animation-delay: 0.96s; animation-delay: 0.96s; opacity: 0.29; } .wrapper .ball.three:nth-child(121) { -webkit-animation-delay: 1.71s; animation-delay: 1.71s; opacity: 0.29; } .wrapper .ball.four:nth-child(171) { -webkit-animation-delay: 2.46s; animation-delay: 2.46s; opacity: 0.29; } .wrapper .ball.five:nth-child(221) { -webkit-animation-delay: 3.21s; animation-delay: 3.21s; opacity: 0.29; } .wrapper .ball.six:nth-child(271) { -webkit-animation-delay: 3.96s; animation-delay: 3.96s; opacity: 0.29; } .wrapper .ball.one:nth-child(22) { -webkit-animation-delay: 0.22s; animation-delay: 0.22s; opacity: 0.28; } .wrapper .ball.two:nth-child(72) { -webkit-animation-delay: 0.97s; animation-delay: 0.97s; opacity: 0.28; } .wrapper .ball.three:nth-child(122) { -webkit-animation-delay: 1.72s; animation-delay: 1.72s; opacity: 0.28; } .wrapper .ball.four:nth-child(172) { -webkit-animation-delay: 2.47s; animation-delay: 2.47s; opacity: 0.28; } .wrapper .ball.five:nth-child(222) { -webkit-animation-delay: 3.22s; animation-delay: 3.22s; opacity: 0.28; } .wrapper .ball.six:nth-child(272) { -webkit-animation-delay: 3.97s; animation-delay: 3.97s; opacity: 0.28; } .wrapper .ball.one:nth-child(23) { -webkit-animation-delay: 0.23s; animation-delay: 0.23s; opacity: 0.27; } .wrapper .ball.two:nth-child(73) { -webkit-animation-delay: 0.98s; animation-delay: 0.98s; opacity: 0.27; } .wrapper .ball.three:nth-child(123) { -webkit-animation-delay: 1.73s; animation-delay: 1.73s; opacity: 0.27; } .wrapper .ball.four:nth-child(173) { -webkit-animation-delay: 2.48s; animation-delay: 2.48s; opacity: 0.27; } .wrapper .ball.five:nth-child(223) { -webkit-animation-delay: 3.23s; animation-delay: 3.23s; opacity: 0.27; } .wrapper .ball.six:nth-child(273) { -webkit-animation-delay: 3.98s; animation-delay: 3.98s; opacity: 0.27; } .wrapper .ball.one:nth-child(24) { -webkit-animation-delay: 0.24s; animation-delay: 0.24s; opacity: 0.26; } .wrapper .ball.two:nth-child(74) { -webkit-animation-delay: 0.99s; animation-delay: 0.99s; opacity: 0.26; } .wrapper .ball.three:nth-child(124) { -webkit-animation-delay: 1.74s; animation-delay: 1.74s; opacity: 0.26; } .wrapper .ball.four:nth-child(174) { -webkit-animation-delay: 2.49s; animation-delay: 2.49s; opacity: 0.26; } .wrapper .ball.five:nth-child(224) { -webkit-animation-delay: 3.24s; animation-delay: 3.24s; opacity: 0.26; } .wrapper .ball.six:nth-child(274) { -webkit-animation-delay: 3.99s; animation-delay: 3.99s; opacity: 0.26; } .wrapper .ball.one:nth-child(25) { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; opacity: 0.25; } .wrapper .ball.two:nth-child(75) { -webkit-animation-delay: 1s; animation-delay: 1s; opacity: 0.25; } .wrapper .ball.three:nth-child(125) { -webkit-animation-delay: 1.75s; animation-delay: 1.75s; opacity: 0.25; } .wrapper .ball.four:nth-child(175) { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; opacity: 0.25; } .wrapper .ball.five:nth-child(225) { -webkit-animation-delay: 3.25s; animation-delay: 3.25s; opacity: 0.25; } .wrapper .ball.six:nth-child(275) { -webkit-animation-delay: 4s; animation-delay: 4s; opacity: 0.25; } .wrapper .ball.one:nth-child(26) { -webkit-animation-delay: 0.26s; animation-delay: 0.26s; opacity: 0.24; } .wrapper .ball.two:nth-child(76) { -webkit-animation-delay: 1.01s; animation-delay: 1.01s; opacity: 0.24; } .wrapper .ball.three:nth-child(126) { -webkit-animation-delay: 1.76s; animation-delay: 1.76s; opacity: 0.24; } .wrapper .ball.four:nth-child(176) { -webkit-animation-delay: 2.51s; animation-delay: 2.51s; opacity: 0.24; } .wrapper .ball.five:nth-child(226) { -webkit-animation-delay: 3.26s; animation-delay: 3.26s; opacity: 0.24; } .wrapper .ball.six:nth-child(276) { -webkit-animation-delay: 4.01s; animation-delay: 4.01s; opacity: 0.24; } .wrapper .ball.one:nth-child(27) { -webkit-animation-delay: 0.27s; animation-delay: 0.27s; opacity: 0.23; } .wrapper .ball.two:nth-child(77) { -webkit-animation-delay: 1.02s; animation-delay: 1.02s; opacity: 0.23; } .wrapper .ball.three:nth-child(127) { -webkit-animation-delay: 1.77s; animation-delay: 1.77s; opacity: 0.23; } .wrapper .ball.four:nth-child(177) { -webkit-animation-delay: 2.52s; animation-delay: 2.52s; opacity: 0.23; } .wrapper .ball.five:nth-child(227) { -webkit-animation-delay: 3.27s; animation-delay: 3.27s; opacity: 0.23; } .wrapper .ball.six:nth-child(277) { -webkit-animation-delay: 4.02s; animation-delay: 4.02s; opacity: 0.23; } .wrapper .ball.one:nth-child(28) { -webkit-animation-delay: 0.28s; animation-delay: 0.28s; opacity: 0.22; } .wrapper .ball.two:nth-child(78) { -webkit-animation-delay: 1.03s; animation-delay: 1.03s; opacity: 0.22; } .wrapper .ball.three:nth-child(128) { -webkit-animation-delay: 1.78s; animation-delay: 1.78s; opacity: 0.22; } .wrapper .ball.four:nth-child(178) { -webkit-animation-delay: 2.53s; animation-delay: 2.53s; opacity: 0.22; } .wrapper .ball.five:nth-child(228) { -webkit-animation-delay: 3.28s; animation-delay: 3.28s; opacity: 0.22; } .wrapper .ball.six:nth-child(278) { -webkit-animation-delay: 4.03s; animation-delay: 4.03s; opacity: 0.22; } .wrapper .ball.one:nth-child(29) { -webkit-animation-delay: 0.29s; animation-delay: 0.29s; opacity: 0.21; } .wrapper .ball.two:nth-child(79) { -webkit-animation-delay: 1.04s; animation-delay: 1.04s; opacity: 0.21; } .wrapper .ball.three:nth-child(129) { -webkit-animation-delay: 1.79s; animation-delay: 1.79s; opacity: 0.21; } .wrapper .ball.four:nth-child(179) { -webkit-animation-delay: 2.54s; animation-delay: 2.54s; opacity: 0.21; } .wrapper .ball.five:nth-child(229) { -webkit-animation-delay: 3.29s; animation-delay: 3.29s; opacity: 0.21; } .wrapper .ball.six:nth-child(279) { -webkit-animation-delay: 4.04s; animation-delay: 4.04s; opacity: 0.21; } .wrapper .ball.one:nth-child(30) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; opacity: 0.2; } .wrapper .ball.two:nth-child(80) { -webkit-animation-delay: 1.05s; animation-delay: 1.05s; opacity: 0.2; } .wrapper .ball.three:nth-child(130) { -webkit-animation-delay: 1.8s; animation-delay: 1.8s; opacity: 0.2; } .wrapper .ball.four:nth-child(180) { -webkit-animation-delay: 2.55s; animation-delay: 2.55s; opacity: 0.2; } .wrapper .ball.five:nth-child(230) { -webkit-animation-delay: 3.3s; animation-delay: 3.3s; opacity: 0.2; } .wrapper .ball.six:nth-child(280) { -webkit-animation-delay: 4.05s; animation-delay: 4.05s; opacity: 0.2; } .wrapper .ball.one:nth-child(31) { -webkit-animation-delay: 0.31s; animation-delay: 0.31s; opacity: 0.19; } .wrapper .ball.two:nth-child(81) { -webkit-animation-delay: 1.06s; animation-delay: 1.06s; opacity: 0.19; } .wrapper .ball.three:nth-child(131) { -webkit-animation-delay: 1.81s; animation-delay: 1.81s; opacity: 0.19; } .wrapper .ball.four:nth-child(181) { -webkit-animation-delay: 2.56s; animation-delay: 2.56s; opacity: 0.19; } .wrapper .ball.five:nth-child(231) { -webkit-animation-delay: 3.31s; animation-delay: 3.31s; opacity: 0.19; } .wrapper .ball.six:nth-child(281) { -webkit-animation-delay: 4.06s; animation-delay: 4.06s; opacity: 0.19; } .wrapper .ball.one:nth-child(32) { -webkit-animation-delay: 0.32s; animation-delay: 0.32s; opacity: 0.18; } .wrapper .ball.two:nth-child(82) { -webkit-animation-delay: 1.07s; animation-delay: 1.07s; opacity: 0.18; } .wrapper .ball.three:nth-child(132) { -webkit-animation-delay: 1.82s; animation-delay: 1.82s; opacity: 0.18; } .wrapper .ball.four:nth-child(182) { -webkit-animation-delay: 2.57s; animation-delay: 2.57s; opacity: 0.18; } .wrapper .ball.five:nth-child(232) { -webkit-animation-delay: 3.32s; animation-delay: 3.32s; opacity: 0.18; } .wrapper .ball.six:nth-child(282) { -webkit-animation-delay: 4.07s; animation-delay: 4.07s; opacity: 0.18; } .wrapper .ball.one:nth-child(33) { -webkit-animation-delay: 0.33s; animation-delay: 0.33s; opacity: 0.17; } .wrapper .ball.two:nth-child(83) { -webkit-animation-delay: 1.08s; animation-delay: 1.08s; opacity: 0.17; } .wrapper .ball.three:nth-child(133) { -webkit-animation-delay: 1.83s; animation-delay: 1.83s; opacity: 0.17; } .wrapper .ball.four:nth-child(183) { -webkit-animation-delay: 2.58s; animation-delay: 2.58s; opacity: 0.17; } .wrapper .ball.five:nth-child(233) { -webkit-animation-delay: 3.33s; animation-delay: 3.33s; opacity: 0.17; } .wrapper .ball.six:nth-child(283) { -webkit-animation-delay: 4.08s; animation-delay: 4.08s; opacity: 0.17; } .wrapper .ball.one:nth-child(34) { -webkit-animation-delay: 0.34s; animation-delay: 0.34s; opacity: 0.16; } .wrapper .ball.two:nth-child(84) { -webkit-animation-delay: 1.09s; animation-delay: 1.09s; opacity: 0.16; } .wrapper .ball.three:nth-child(134) { -webkit-animation-delay: 1.84s; animation-delay: 1.84s; opacity: 0.16; } .wrapper .ball.four:nth-child(184) { -webkit-animation-delay: 2.59s; animation-delay: 2.59s; opacity: 0.16; } .wrapper .ball.five:nth-child(234) { -webkit-animation-delay: 3.34s; animation-delay: 3.34s; opacity: 0.16; } .wrapper .ball.six:nth-child(284) { -webkit-animation-delay: 4.09s; animation-delay: 4.09s; opacity: 0.16; } .wrapper .ball.one:nth-child(35) { -webkit-animation-delay: 0.35s; animation-delay: 0.35s; opacity: 0.15; } .wrapper .ball.two:nth-child(85) { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; opacity: 0.15; } .wrapper .ball.three:nth-child(135) { -webkit-animation-delay: 1.85s; animation-delay: 1.85s; opacity: 0.15; } .wrapper .ball.four:nth-child(185) { -webkit-animation-delay: 2.6s; animation-delay: 2.6s; opacity: 0.15; } .wrapper .ball.five:nth-child(235) { -webkit-animation-delay: 3.35s; animation-delay: 3.35s; opacity: 0.15; } .wrapper .ball.six:nth-child(285) { -webkit-animation-delay: 4.1s; animation-delay: 4.1s; opacity: 0.15; } .wrapper .ball.one:nth-child(36) { -webkit-animation-delay: 0.36s; animation-delay: 0.36s; opacity: 0.14; } .wrapper .ball.two:nth-child(86) { -webkit-animation-delay: 1.11s; animation-delay: 1.11s; opacity: 0.14; } .wrapper .ball.three:nth-child(136) { -webkit-animation-delay: 1.86s; animation-delay: 1.86s; opacity: 0.14; } .wrapper .ball.four:nth-child(186) { -webkit-animation-delay: 2.61s; animation-delay: 2.61s; opacity: 0.14; } .wrapper .ball.five:nth-child(236) { -webkit-animation-delay: 3.36s; animation-delay: 3.36s; opacity: 0.14; } .wrapper .ball.six:nth-child(286) { -webkit-animation-delay: 4.11s; animation-delay: 4.11s; opacity: 0.14; } .wrapper .ball.one:nth-child(37) { -webkit-animation-delay: 0.37s; animation-delay: 0.37s; opacity: 0.13; } .wrapper .ball.two:nth-child(87) { -webkit-animation-delay: 1.12s; animation-delay: 1.12s; opacity: 0.13; } .wrapper .ball.three:nth-child(137) { -webkit-animation-delay: 1.87s; animation-delay: 1.87s; opacity: 0.13; } .wrapper .ball.four:nth-child(187) { -webkit-animation-delay: 2.62s; animation-delay: 2.62s; opacity: 0.13; } .wrapper .ball.five:nth-child(237) { -webkit-animation-delay: 3.37s; animation-delay: 3.37s; opacity: 0.13; } .wrapper .ball.six:nth-child(287) { -webkit-animation-delay: 4.12s; animation-delay: 4.12s; opacity: 0.13; } .wrapper .ball.one:nth-child(38) { -webkit-animation-delay: 0.38s; animation-delay: 0.38s; opacity: 0.12; } .wrapper .ball.two:nth-child(88) { -webkit-animation-delay: 1.13s; animation-delay: 1.13s; opacity: 0.12; } .wrapper .ball.three:nth-child(138) { -webkit-animation-delay: 1.88s; animation-delay: 1.88s; opacity: 0.12; } .wrapper .ball.four:nth-child(188) { -webkit-animation-delay: 2.63s; animation-delay: 2.63s; opacity: 0.12; } .wrapper .ball.five:nth-child(238) { -webkit-animation-delay: 3.38s; animation-delay: 3.38s; opacity: 0.12; } .wrapper .ball.six:nth-child(288) { -webkit-animation-delay: 4.13s; animation-delay: 4.13s; opacity: 0.12; } .wrapper .ball.one:nth-child(39) { -webkit-animation-delay: 0.39s; animation-delay: 0.39s; opacity: 0.11; } .wrapper .ball.two:nth-child(89) { -webkit-animation-delay: 1.14s; animation-delay: 1.14s; opacity: 0.11; } .wrapper .ball.three:nth-child(139) { -webkit-animation-delay: 1.89s; animation-delay: 1.89s; opacity: 0.11; } .wrapper .ball.four:nth-child(189) { -webkit-animation-delay: 2.64s; animation-delay: 2.64s; opacity: 0.11; } .wrapper .ball.five:nth-child(239) { -webkit-animation-delay: 3.39s; animation-delay: 3.39s; opacity: 0.11; } .wrapper .ball.six:nth-child(289) { -webkit-animation-delay: 4.14s; animation-delay: 4.14s; opacity: 0.11; } .wrapper .ball.one:nth-child(40) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; opacity: 0.1; } .wrapper .ball.two:nth-child(90) { -webkit-animation-delay: 1.15s; animation-delay: 1.15s; opacity: 0.1; } .wrapper .ball.three:nth-child(140) { -webkit-animation-delay: 1.9s; animation-delay: 1.9s; opacity: 0.1; } .wrapper .ball.four:nth-child(190) { -webkit-animation-delay: 2.65s; animation-delay: 2.65s; opacity: 0.1; } .wrapper .ball.five:nth-child(240) { -webkit-animation-delay: 3.4s; animation-delay: 3.4s; opacity: 0.1; } .wrapper .ball.six:nth-child(290) { -webkit-animation-delay: 4.15s; animation-delay: 4.15s; opacity: 0.1; } .wrapper .ball.one:nth-child(41) { -webkit-animation-delay: 0.41s; animation-delay: 0.41s; opacity: 0.09; } .wrapper .ball.two:nth-child(91) { -webkit-animation-delay: 1.16s; animation-delay: 1.16s; opacity: 0.09; } .wrapper .ball.three:nth-child(141) { -webkit-animation-delay: 1.91s; animation-delay: 1.91s; opacity: 0.09; } .wrapper .ball.four:nth-child(191) { -webkit-animation-delay: 2.66s; animation-delay: 2.66s; opacity: 0.09; } .wrapper .ball.five:nth-child(241) { -webkit-animation-delay: 3.41s; animation-delay: 3.41s; opacity: 0.09; } .wrapper .ball.six:nth-child(291) { -webkit-animation-delay: 4.16s; animation-delay: 4.16s; opacity: 0.09; } .wrapper .ball.one:nth-child(42) { -webkit-animation-delay: 0.42s; animation-delay: 0.42s; opacity: 0.08; } .wrapper .ball.two:nth-child(92) { -webkit-animation-delay: 1.17s; animation-delay: 1.17s; opacity: 0.08; } .wrapper .ball.three:nth-child(142) { -webkit-animation-delay: 1.92s; animation-delay: 1.92s; opacity: 0.08; } .wrapper .ball.four:nth-child(192) { -webkit-animation-delay: 2.67s; animation-delay: 2.67s; opacity: 0.08; } .wrapper .ball.five:nth-child(242) { -webkit-animation-delay: 3.42s; animation-delay: 3.42s; opacity: 0.08; } .wrapper .ball.six:nth-child(292) { -webkit-animation-delay: 4.17s; animation-delay: 4.17s; opacity: 0.08; } .wrapper .ball.one:nth-child(43) { -webkit-animation-delay: 0.43s; animation-delay: 0.43s; opacity: 0.07; } .wrapper .ball.two:nth-child(93) { -webkit-animation-delay: 1.18s; animation-delay: 1.18s; opacity: 0.07; } .wrapper .ball.three:nth-child(143) { -webkit-animation-delay: 1.93s; animation-delay: 1.93s; opacity: 0.07; } .wrapper .ball.four:nth-child(193) { -webkit-animation-delay: 2.68s; animation-delay: 2.68s; opacity: 0.07; } .wrapper .ball.five:nth-child(243) { -webkit-animation-delay: 3.43s; animation-delay: 3.43s; opacity: 0.07; } .wrapper .ball.six:nth-child(293) { -webkit-animation-delay: 4.18s; animation-delay: 4.18s; opacity: 0.07; } .wrapper .ball.one:nth-child(44) { -webkit-animation-delay: 0.44s; animation-delay: 0.44s; opacity: 0.06; } .wrapper .ball.two:nth-child(94) { -webkit-animation-delay: 1.19s; animation-delay: 1.19s; opacity: 0.06; } .wrapper .ball.three:nth-child(144) { -webkit-animation-delay: 1.94s; animation-delay: 1.94s; opacity: 0.06; } .wrapper .ball.four:nth-child(194) { -webkit-animation-delay: 2.69s; animation-delay: 2.69s; opacity: 0.06; } .wrapper .ball.five:nth-child(244) { -webkit-animation-delay: 3.44s; animation-delay: 3.44s; opacity: 0.06; } .wrapper .ball.six:nth-child(294) { -webkit-animation-delay: 4.19s; animation-delay: 4.19s; opacity: 0.06; } .wrapper .ball.one:nth-child(45) { -webkit-animation-delay: 0.45s; animation-delay: 0.45s; opacity: 0.05; } .wrapper .ball.two:nth-child(95) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; opacity: 0.05; } .wrapper .ball.three:nth-child(145) { -webkit-animation-delay: 1.95s; animation-delay: 1.95s; opacity: 0.05; } .wrapper .ball.four:nth-child(195) { -webkit-animation-delay: 2.7s; animation-delay: 2.7s; opacity: 0.05; } .wrapper .ball.five:nth-child(245) { -webkit-animation-delay: 3.45s; animation-delay: 3.45s; opacity: 0.05; } .wrapper .ball.six:nth-child(295) { -webkit-animation-delay: 4.2s; animation-delay: 4.2s; opacity: 0.05; } .wrapper .ball.one:nth-child(46) { -webkit-animation-delay: 0.46s; animation-delay: 0.46s; opacity: 0.04; } .wrapper .ball.two:nth-child(96) { -webkit-animation-delay: 1.21s; animation-delay: 1.21s; opacity: 0.04; } .wrapper .ball.three:nth-child(146) { -webkit-animation-delay: 1.96s; animation-delay: 1.96s; opacity: 0.04; } .wrapper .ball.four:nth-child(196) { -webkit-animation-delay: 2.71s; animation-delay: 2.71s; opacity: 0.04; } .wrapper .ball.five:nth-child(246) { -webkit-animation-delay: 3.46s; animation-delay: 3.46s; opacity: 0.04; } .wrapper .ball.six:nth-child(296) { -webkit-animation-delay: 4.21s; animation-delay: 4.21s; opacity: 0.04; } .wrapper .ball.one:nth-child(47) { -webkit-animation-delay: 0.47s; animation-delay: 0.47s; opacity: 0.03; } .wrapper .ball.two:nth-child(97) { -webkit-animation-delay: 1.22s; animation-delay: 1.22s; opacity: 0.03; } .wrapper .ball.three:nth-child(147) { -webkit-animation-delay: 1.97s; animation-delay: 1.97s; opacity: 0.03; } .wrapper .ball.four:nth-child(197) { -webkit-animation-delay: 2.72s; animation-delay: 2.72s; opacity: 0.03; } .wrapper .ball.five:nth-child(247) { -webkit-animation-delay: 3.47s; animation-delay: 3.47s; opacity: 0.03; } .wrapper .ball.six:nth-child(297) { -webkit-animation-delay: 4.22s; animation-delay: 4.22s; opacity: 0.03; } .wrapper .ball.one:nth-child(48) { -webkit-animation-delay: 0.48s; animation-delay: 0.48s; opacity: 0.02; } .wrapper .ball.two:nth-child(98) { -webkit-animation-delay: 1.23s; animation-delay: 1.23s; opacity: 0.02; } .wrapper .ball.three:nth-child(148) { -webkit-animation-delay: 1.98s; animation-delay: 1.98s; opacity: 0.02; } .wrapper .ball.four:nth-child(198) { -webkit-animation-delay: 2.73s; animation-delay: 2.73s; opacity: 0.02; } .wrapper .ball.five:nth-child(248) { -webkit-animation-delay: 3.48s; animation-delay: 3.48s; opacity: 0.02; } .wrapper .ball.six:nth-child(298) { -webkit-animation-delay: 4.23s; animation-delay: 4.23s; opacity: 0.02; } .wrapper .ball.one:nth-child(49) { -webkit-animation-delay: 0.49s; animation-delay: 0.49s; opacity: 0.01; } .wrapper .ball.two:nth-child(99) { -webkit-animation-delay: 1.24s; animation-delay: 1.24s; opacity: 0.01; } .wrapper .ball.three:nth-child(149) { -webkit-animation-delay: 1.99s; animation-delay: 1.99s; opacity: 0.01; } .wrapper .ball.four:nth-child(199) { -webkit-animation-delay: 2.74s; animation-delay: 2.74s; opacity: 0.01; } .wrapper .ball.five:nth-child(249) { -webkit-animation-delay: 3.49s; animation-delay: 3.49s; opacity: 0.01; } .wrapper .ball.six:nth-child(299) { -webkit-animation-delay: 4.24s; animation-delay: 4.24s; opacity: 0.01; } .wrapper .ball.one:nth-child(50) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; opacity: 0; } .wrapper .ball.two:nth-child(100) { -webkit-animation-delay: 1.25s; animation-delay: 1.25s; opacity: 0; } .wrapper .ball.three:nth-child(150) { -webkit-animation-delay: 2s; animation-delay: 2s; opacity: 0; } .wrapper .ball.four:nth-child(200) { -webkit-animation-delay: 2.75s; animation-delay: 2.75s; opacity: 0; } .wrapper .ball.five:nth-child(250) { -webkit-animation-delay: 3.5s; animation-delay: 3.5s; opacity: 0; } .wrapper .ball.six:nth-child(300) { -webkit-animation-delay: 4.25s; animation-delay: 4.25s; opacity: 0; } @-webkit-keyframes swing { 0% { transform: translate(-50%, -50%) rotate(0deg) translateY(55px); visibility: visible; } 10% { transform: translate(-50%, -50%) rotate(36deg) translateY(5px); visibility: visible; } 20% { transform: translate(-50%, -50%) rotate(72deg) translateY(55px); visibility: visible; } 30% { transform: translate(-50%, -50%) rotate(108deg) translateY(5px); visibility: visible; } 40% { transform: translate(-50%, -50%) rotate(144deg) translateY(55px); visibility: visible; } 50% { transform: translate(-50%, -50%) rotate(180deg) translateY(5px); visibility: visible; } 60% { transform: translate(-50%, -50%) rotate(216deg) translateY(55px); visibility: visible; } 70% { transform: translate(-50%, -50%) rotate(252deg) translateY(5px); visibility: visible; } 80% { transform: translate(-50%, -50%) rotate(288deg) translateY(55px); visibility: visible; } 90% { transform: translate(-50%, -50%) rotate(324deg) translateY(5px); visibility: visible; } 100% { transform: translate(-50%, -50%) rotate(360deg) translateY(55px); visibility: visible; } } @keyframes swing { 0% { transform: translate(-50%, -50%) rotate(0deg) translateY(55px); visibility: visible; } 10% { transform: translate(-50%, -50%) rotate(36deg) translateY(5px); visibility: visible; } 20% { transform: translate(-50%, -50%) rotate(72deg) translateY(55px); visibility: visible; } 30% { transform: translate(-50%, -50%) rotate(108deg) translateY(5px); visibility: visible; } 40% { transform: translate(-50%, -50%) rotate(144deg) translateY(55px); visibility: visible; } 50% { transform: translate(-50%, -50%) rotate(180deg) translateY(5px); visibility: visible; } 60% { transform: translate(-50%, -50%) rotate(216deg) translateY(55px); visibility: visible; } 70% { transform: translate(-50%, -50%) rotate(252deg) translateY(5px); visibility: visible; } 80% { transform: translate(-50%, -50%) rotate(288deg) translateY(55px); visibility: visible; } 90% { transform: translate(-50%, -50%) rotate(324deg) translateY(5px); visibility: visible; } 100% { transform: translate(-50%, -50%) rotate(360deg) translateY(55px); visibility: visible; } } Навигация по записям Loader & Spinners Loader