@-webkit-keyframes ball-pulse-rise-even { 0% { -webkit-transform : scale(1.1); transform : scale(1.1); } 25% { -webkit-transform : translateY(-30px); transform : translateY(-30px); } 50% { -webkit-transform : scale(0.4); transform : scale(0.4); } 75% { -webkit-transform : translateY(30px); transform : translateY(30px); } 100% { -webkit-transform : translateY(0); transform : translateY(0); -webkit-transform : scale(1); transform : scale(1); } } @-moz-keyframes ball-pulse-rise-even { 0% { -moz-transform : scale(1.1); transform : scale(1.1); } 25% { -moz-transform : translateY(-30px); transform : translateY(-30px); } 50% { -moz-transform : scale(0.4); transform : scale(0.4); } 75% { -moz-transform : translateY(30px); transform : translateY(30px); } 100% { -moz-transform : translateY(0); transform : translateY(0); -moz-transform : scale(1); transform : scale(1); } } @-o-keyframes ball-pulse-rise-even { 0% { -o-transform : scale(1.1); transform : scale(1.1); } 25% { -o-transform : translateY(-30px); transform : translateY(-30px); } 50% { -o-transform : scale(0.4); transform : scale(0.4); } 75% { -o-transform : translateY(30px); transform : translateY(30px); } 100% { -o-transform : translateY(0); transform : translateY(0); -o-transform : scale(1); transform : scale(1); } } @keyframes ball-pulse-rise-even { 0% { -webkit-transform : scale(1.1); -moz-transform : scale(1.1); -o-transform : scale(1.1); transform : scale(1.1); } 25% { -webkit-transform : translateY(-30px); -moz-transform : translateY(-30px); -o-transform : translateY(-30px); transform : translateY(-30px); } 50% { -webkit-transform : scale(0.4); -moz-transform : scale(0.4); -o-transform : scale(0.4); transform : scale(0.4); } 75% { -webkit-transform : translateY(30px); -moz-transform : translateY(30px); -o-transform : translateY(30px); transform : translateY(30px); } 100% { -webkit-transform : translateY(0); -moz-transform : translateY(0); -o-transform : translateY(0); transform : translateY(0); -webkit-transform : scale(1); -moz-transform : scale(1); -o-transform : scale(1); transform : scale(1); } } @-webkit-keyframes ball-pulse-rise-odd { 0% { -webkit-transform : scale(0.4); transform : scale(0.4); } 25% { -webkit-transform : translateY(30px); transform : translateY(30px); } 50% { -webkit-transform : scale(1.1); transform : scale(1.1); } 75% { -webkit-transform : translateY(-30px); transform : translateY(-30px); } 100% { -webkit-transform : translateY(0); transform : translateY(0); -webkit-transform : scale(0.75); transform : scale(0.75); } } @-moz-keyframes ball-pulse-rise-odd { 0% { -moz-transform : scale(0.4); transform : scale(0.4); } 25% { -moz-transform : translateY(30px); transform : translateY(30px); } 50% { -moz-transform : scale(1.1); transform : scale(1.1); } 75% { -moz-transform : translateY(-30px); transform : translateY(-30px); } 100% { -moz-transform : translateY(0); transform : translateY(0); -moz-transform : scale(0.75); transform : scale(0.75); } } @-o-keyframes ball-pulse-rise-odd { 0% { -o-transform : scale(0.4); transform : scale(0.4); } 25% { -o-transform : translateY(30px); transform : translateY(30px); } 50% { -o-transform : scale(1.1); transform : scale(1.1); } 75% { -o-transform : translateY(-30px); transform : translateY(-30px); } 100% { -o-transform : translateY(0); transform : translateY(0); -o-transform : scale(0.75); transform : scale(0.75); } } @keyframes ball-pulse-rise-odd { 0% { -webkit-transform : scale(0.4); -moz-transform : scale(0.4); -o-transform : scale(0.4); transform : scale(0.4); } 25% { -webkit-transform : translateY(30px); -moz-transform : translateY(30px); -o-transform : translateY(30px); transform : translateY(30px); } 50% { -webkit-transform : scale(1.1); -moz-transform : scale(1.1); -o-transform : scale(1.1); transform : scale(1.1); } 75% { -webkit-transform : translateY(-30px); -moz-transform : translateY(-30px); -o-transform : translateY(-30px); transform : translateY(-30px); } 100% { -webkit-transform : translateY(0); -moz-transform : translateY(0); -o-transform : translateY(0); transform : translateY(0); -webkit-transform : scale(0.75); -moz-transform : scale(0.75); -o-transform : scale(0.75); transform : scale(0.75); } } .ball-pulse-rise > 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; -webkit-animation-duration : 1s; -moz-animation-duration : 1s; -o-animation-duration : 1s; animation-duration : 1s; -webkit-animation-timing-function : cubic-bezier(0.15, 0.46, 0.9, 0.6); -moz-animation-timing-function : cubic-bezier(0.15, 0.46, 0.9, 0.6); -o-animation-timing-function : cubic-bezier(0.15, 0.46, 0.9, 0.6); animation-timing-function : cubic-bezier(0.15, 0.46, 0.9, 0.6); -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; } .ball-pulse-rise > div:nth-child(2n) { -webkit-animation-name : ball-pulse-rise-even; -moz-animation-name : ball-pulse-rise-even; -o-animation-name : ball-pulse-rise-even; animation-name : ball-pulse-rise-even; } .ball-pulse-rise > div:nth-child(2n-1) { -webkit-animation-name : ball-pulse-rise-odd; -moz-animation-name : ball-pulse-rise-odd; -o-animation-name : ball-pulse-rise-odd; animation-name : ball-pulse-rise-odd; }