<div class="box parabolic1"><i></i></div>
<div class="box sinusoidal1"><i></i></div>

<button> Run the animations </button>

<div class="panel" >
<div>cubic-bezier(<span class="P1">0</span>,V,<span class="P2">1</span>,V):
<input type="range" min="0" max="1" step="0.1" value="0" name="P1">
<input type="range" min="0" max="1" step="0.1" value="1" name="P2">
</div>
<div>
cubic-bezier(<span class="S1">0.5</span>,V,<span class="S2">0.5</span>,-V):
<input type="range" min="0" max="1" step="0.1" value="0.5" name="S1">
<input type="range" min="0" max="1" step="0.1" value="0.5" name="S2">
</div>
</div>

<div class="debug"></div>
.box {
display:inline-block;
width:150px;
height:200px;
position:relative;
border:1px solid;
background:
linear-gradient(blue 0 0) center/100% 1px no-repeat,
linear-gradient(blue 0 0) center/1px 100% no-repeat;
}

.box i{
content:"";
position:absolute;
width:30px;
height:30px;
left:0;
top:50%;
transform:translateY(-50%);
}
.start .parabolic1 i {
animation:
x 1s linear infinite alternate,
y1 1s infinite cubic-bezier(var(--p1,0),667,var(--p2,1),667) alternate;
}
.start .sinusoidal1 i {
animation:
x 1s linear infinite alternate,
y1 1s infinite cubic-bezier(var(--s1,0.5),1725,var(--s2,0.5),-1725) alternate;
}

@keyframes x { to {left:calc(100% - 30px)}}
@keyframes y1 {to {top:49.9%}}

/**/
.panel div:first-child {border-bottom: 1px solid;padding-bottom: 10px;margin-bottom: 10px;}
let elem = document.querySelectorAll('i');
let start;

function debug(timestamp) {
if (start === undefined)
start = timestamp;
const elapsed = timestamp - start;
for(var i=0;i<2;i++) {
let rect = elem[i].getBoundingClientRect();
document.querySelector('.debug').insertAdjacentHTML("afterbegin",'<d style="top:'+(rect.y + rect.height/2)+'px;left:'+(rect.x + rect.width/2)+'px;"></d>')
}
if (elapsed < 2000) {
window.requestAnimationFrame(debug);
}
}

function clear() {
document.querySelector('.debug').innerHTML="&nbsp;";
start=undefined;
window.requestAnimationFrame(debug);
}

document.body.style.setProperty("--p1", this.value);
document.querySelector('.P1').innerHTML=this.value;
clear()
});
document.body.style.setProperty("--p2", this.value);
document.querySelector('.P2').innerHTML=this.value;
clear()
});

document.body.style.setProperty("--s1", this.value);
document.querySelector('.S1').innerHTML=this.value;
clear()
});
document.body.style.setProperty("--s2", this.value);
document.querySelector('.S2').innerHTML=this.value;
clear()
});