<div class="box"></div>

@property --p1{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --p2{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --p3{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --p4{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.box {
  width:300px;
  height:200px;
  border:1px solid;
  margin:auto;
  display:flex;
  overflow:hidden;
  cursor:pointer;
}
.box:before {
  content:"";
  width:20px;
  height:20px;
  position:relative;
  left:0;
  border-radius:50%;
  margin-top:10px;
  background:currentColor;
  transform:translateY(calc((var(--p1)*var(--p1) + var(--p2) + var(--p3) + var(--p4))*1px));
}
.box:hover::before {
  --p1:13;
  --p2:-0.1;
  --p3:-0.1;
  --p4:-0.1;
  left:calc(100% - 20px);
  transition:
       left 1.7s linear,
      --p1 .6s linear,
      --p2 .4s cubic-bezier(.1,1000,.8,1000) .6s,
      --p3 .3s cubic-bezier(.1,500,.8,500)  1s,
      --p4 .2s cubic-bezier(.1,200,.8,200)  1.3s;
}