Small demo as follows, can have their own needs to modify:
Css
@keyframes animx{0% { left:0px;}100%{ Left:500px;}} @keyframes Animy{0% {Top:0px;}100%{Top:500px;}} #ball{width:20px;Height:20px;Background-color:#f66;Border-radius:50%;position:relative;/*animation:animx 4s cubic-bezier (0.36,0,0.64,1) -2s infinite Alternate, animy 4s cubic-bezier (0.36,0,0.64,1) 0s infi Nite Alternate; */ /*round end of movement*/ /*animation:animx 4s cubic-bezier (0.36,0,0.64,1) 0s infinite alternate, animy 4s cubic-bezier (0.36,0,0.64,1) 0s infin ITE Alternate; */ /*linear round-trip motion end*/ /*animation:animx 4s cubic-bezier (1,0,0,1) -2s infinite Alternate, animy 4s cubic-bezier (1,0,0,1) 0s infinite alternat e;*/ /*rounded square motion ends*/Animation:Animx 8s Cubic-bezier (0,0,0,1) -2s infinite Alternate, animy 4s cubic-bezier (0,0,0,1) 0s infinite alternate;}/*#lopp {width:498px; height:498px; border:0px solid #999; border-radius:50%; Position:absolute; left:9px; top:9px; } */
Html
<DivID= "Lopp"></Div> <DivID= "Ball"></Div> <DivID= "Ball"></Div> <DivID= "Ball"></Div> <DivID= "Ball"></Div> <DivID= "Ball"></Div>
effect, the red line is the trajectory of the motion:
"Trajectory animation css" irregular trajectory animation CSS tutorial, pinball, customer service ads suspended layer can be used