@-webkit-keyframes rotate { 0% { -webkit-transform : rotate(0deg) scale(1); transform : rotate(0deg) scale(1); } 50% { -webkit-transform : rotate(-180deg) scale(0.6); transform : rotate(-180deg) scale(0.6); } 100% { -webkit-transform : rotate(-360deg) scale(1); transform : rotate(-360deg) scale(1); } } @keyframes rotate { 0% { -webkit-transform : rotate(0deg) scale(1); transform : rotate(0deg) scale(1); } 50% { -webkit-transform : rotate(-180deg) scale(0.6); transform : rotate(-180deg) scale(0.6); } 100% { -webkit-transform : rotate(-360deg) scale(1); transform : rotate(-360deg) scale(1); } } @-webkit-keyframes scale { 30% { -webkit-transform : scale(0.3); transform : scale(0.3); } 100% { -webkit-transform : scale(1); transform : scale(1); } } @keyframes scale { 30% { -webkit-transform : scale(0.3); transform : scale(0.3); } 100% { -webkit-transform : scale(1); transform : scale(1); } } .ball-clip-rotate-pulse { position : relative; -webkit-transform : translateY(-15px); -ms-transform : translateY(-15px); transform : translateY(-15px); } .ball-clip-rotate-pulse > div { -webkit-animation-fill-mode : both; animation-fill-mode : both; position : absolute; top : 0; right : 0; border-radius : 100%; } .ball-clip-rotate-pulse > div:first-child { background : #6B6F82; height : 16px; width : 16px; top : 7px; right : -7px; -webkit-animation : scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; animation : scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; } .ball-clip-rotate-pulse > div:last-child { position : absolute; border : 2px solid #6B6F82; width : 30px; height : 30px; right : -16px; top : -2px; background : transparent; border : 2px solid; border-color : #6B6F82 transparent #6B6F82 transparent; -webkit-animation : rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; animation : rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; -webkit-animation-duration : 1s; animation-duration : 1s; }