.box { width:200px; height:200px; background:#FF0000; position:relative; /*top:200px; left:200px; */ } .a2 { width:30px; height:30px; border-radius:50%; animation:aa 2s ease 0s infinite alternate; background:#0000FF; position:absolute; left:0px; bottom:0px; } @keyframes aa { 0% { left:0px; bottom:0px; } 25% { left:0px; bottom:170px; } 50% { left:170px; bottom:170px; } 75% { left:170px; bottom:0px; } 100% { left:0px; bottom:0px; } 0% { background:#FF0000; } 30% { background:#f0f0f0; } 50% { background:#0000ff; } 100% { background:#ffff00; } 0% { border-radius:50%; } 100% { border-radius:0%; } }.box1 { width:200px; height:200px; position:relative; top:200px; left:500px; background:#FFFF00; } .a1 { width:30px; height:30px; border-radius:50%; background:#FF0000; animation:ab 2s ease 0s infinite alternate; position:absolute; left:0px; bottom:0px; } @keyframes ab { 0% { left:0px; bottom:0px; } 25% { left:0px; bottom:170px; } 50% { left:170px; bottom:170px; } 75% { left:170px; bottom:0px; } 100% { left:0px; bottom:0px; } }