@-webkit-keyframes ball-grid-beat { 50% { opacity : 0.7; } 100% { opacity : 1; } } @-moz-keyframes ball-grid-beat { 50% { opacity : 0.7; } 100% { opacity : 1; } } @-o-keyframes ball-grid-beat { 50% { opacity : 0.7; } 100% { opacity : 1; } } @keyframes ball-grid-beat { 50% { opacity : 0.7; } 100% { opacity : 1; } } .ball-grid-beat { width : 57px; } .ball-grid-beat > div:nth-child(1) { -webkit-animation-delay : 0.38s; -moz-animation-delay : 0.38s; -o-animation-delay : 0.38s; animation-delay : 0.38s; -webkit-animation-duration : 1.28s; -moz-animation-duration : 1.28s; -o-animation-duration : 1.28s; animation-duration : 1.28s; } .ball-grid-beat > div:nth-child(2) { -webkit-animation-delay : -0.02s; -moz-animation-delay : -0.02s; -o-animation-delay : -0.02s; animation-delay : -0.02s; -webkit-animation-duration : 0.63s; -moz-animation-duration : 0.63s; -o-animation-duration : 0.63s; animation-duration : 0.63s; } .ball-grid-beat > div:nth-child(3) { -webkit-animation-delay : -0.05s; -moz-animation-delay : -0.05s; -o-animation-delay : -0.05s; animation-delay : -0.05s; -webkit-animation-duration : 1.47s; -moz-animation-duration : 1.47s; -o-animation-duration : 1.47s; animation-duration : 1.47s; } .ball-grid-beat > div:nth-child(4) { -webkit-animation-delay : -0.17s; -moz-animation-delay : -0.17s; -o-animation-delay : -0.17s; animation-delay : -0.17s; -webkit-animation-duration : 1.11s; -moz-animation-duration : 1.11s; -o-animation-duration : 1.11s; animation-duration : 1.11s; } .ball-grid-beat > div:nth-child(5) { -webkit-animation-delay : 0.72s; -moz-animation-delay : 0.72s; -o-animation-delay : 0.72s; animation-delay : 0.72s; -webkit-animation-duration : 1.32s; -moz-animation-duration : 1.32s; -o-animation-duration : 1.32s; animation-duration : 1.32s; } .ball-grid-beat > div:nth-child(6) { -webkit-animation-delay : 0.51s; -moz-animation-delay : 0.51s; -o-animation-delay : 0.51s; animation-delay : 0.51s; -webkit-animation-duration : 1.07s; -moz-animation-duration : 1.07s; -o-animation-duration : 1.07s; animation-duration : 1.07s; } .ball-grid-beat > div:nth-child(7) { -webkit-animation-delay : 0.52s; -moz-animation-delay : 0.52s; -o-animation-delay : 0.52s; animation-delay : 0.52s; -webkit-animation-duration : 1.25s; -moz-animation-duration : 1.25s; -o-animation-duration : 1.25s; animation-duration : 1.25s; } .ball-grid-beat > div:nth-child(8) { -webkit-animation-delay : 0.17s; -moz-animation-delay : 0.17s; -o-animation-delay : 0.17s; animation-delay : 0.17s; -webkit-animation-duration : 0.89s; -moz-animation-duration : 0.89s; -o-animation-duration : 0.89s; animation-duration : 0.89s; } .ball-grid-beat > div:nth-child(9) { -webkit-animation-delay : 0.38s; -moz-animation-delay : 0.38s; -o-animation-delay : 0.38s; animation-delay : 0.38s; -webkit-animation-duration : 1.56s; -moz-animation-duration : 1.56s; -o-animation-duration : 1.56s; animation-duration : 1.56s; } .ball-grid-beat > div { background-color : #55595C; width : 15px; height : 15px; border-radius : 100%; margin : 2px; -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; display : inline-block; float : right; -webkit-animation-name : ball-grid-beat; -moz-animation-name : ball-grid-beat; -o-animation-name : ball-grid-beat; animation-name : ball-grid-beat; -webkit-animation-iteration-count : infinite; -moz-animation-iteration-count : infinite; -o-animation-iteration-count : infinite; animation-iteration-count : infinite; -webkit-animation-delay : 0; -moz-animation-delay : 0; -o-animation-delay : 0; animation-delay : 0; }