<!DOCTYPE html> <html> <head> <style> .ball{ text-indent:1px; width:70px; height:70px; background-color:green; border-radius:50%; position:absolute; right:0%; bottom:0%; text-align:center; color:white; animation:ballmove 8s 1; } @-webkit-keyframes ballmove{ 0%{ transform:rotateZ(-360deg); top:0%; right:93%; } 12.5%{ right:93%; top:82%; } 25%{ right:77.5%; /* 77.5=93-15.5 */ top:20.5%; /* 20.5=82-82*0.75 */ } 37.5%{ right:62%; /* 62.5=77.5-15.5 */ top:82%; /* again initial value */ } 50%{ right:46.5%; /* 46.5=62.5-15.5 */ top:35.87%; /* 35.87=82-82*0.75*0.75 */ } 62.5%{ right:31%; /* 31=46.5-15.5 */ top:82%; /* again initial value */ } 75%{ right:15.5%; /* 15.5=31-15.5 */ top:47.4%; /* 47.4=82-82*0.75*0.75*0.75 */ } 87.5%{ right:0%; /* 0=15.5-15.5 */ top:82%; /* again */ } } </style> </head> <body> <div class="ball"> <p>Web4CSS</p> </div> </body> </html>
Run
×
Share