"Trajectory animation css" irregular trajectory animation CSS tutorial, pinball, customer service ads suspended layer can be used

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