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

@property --p1{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@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;
}
@property --p5{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --p6{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.box {
  width:300px;
  height:200px;
  border:1px solid;
  margin:auto;
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.box:after {
  content:"";
  position:absolute;
  border:10px solid lightblue;
  border-top:0;
  border-radius: 0 0 1000px 1000px;
  inset:30% 10% 10%;
}
.box:before {
  content:"";
  width:20px;
  height:20px;
  position:absolute;
  top:0;
  right:calc(10% + 10px);
  border-radius:50%;
  background:currentColor;
  transform-origin: -90px 50%;
  transform:
      translateY(var(--p1)) rotate(calc((var(--p2) - var(--p3) + var(--p4) - var(--p5) + var(--p6))*1deg));
}
.box:hover::before {
  --p1:50px;
  --p2:130;
  --p3:60;
  --p4:30;
  --p5:15;
  --p6:5;
  transition:
      --p1 .2s ease-in,
      --p2 .6s ease-out .15s,
      --p3 .4s ease-out .8s,
      --p4 .2s ease-out 1.2s,
      --p5 .1s ease-out 1.4s,
      --p6 .1s ease-out 1.5s;
}