Javascript CSS3将形状动画化到屏幕上的特定区域

我正在尝试创建一个小测验，使用CSS动画，我希望单选按钮圆从其位置向下移动到一个小信封图像中

我让动画按预期工作，因为我不能让动画在每个答案的同一点停止。我想这是因为每个问题都在屏幕的较低位置

我的问题是，如何才能使每个圆始终位于信封图形上？

我已经包括了一个代码笔链接，以帮助更好地理解我到目前为止所做的事情；我觉得当你看到它的时候，如果我没有恰当地解释它，你就会确切地知道我想做什么

HTML

JS

---

只需添加并更改

.basket

类的css即可：

.basket {
  position: absolute;
  top: 100vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 7rem;
  color: white;
}

如果您需要更多的定制，请告诉我

我为您更新它（仅针对第一个球），我认为您可以：

---

更新链接：

这将隐藏屏幕外的图形，我发现的问题是关键帧，以确保圆在同一点结束。。我想这会对你有帮助，如果你需要更多的帮助，你可以问我。

@keyframes firstball {
  0% {
    transform: translate(0px, 0px);
    background-color:   white;
  }
45% {
    transform: translate(45vw, 0px);
     background-color:  white;
  }
50% {
    transform: translate(45vw, 5vh);
    background: white;
}
60% {
  transform: translate(45vw, 0vh);
    background:white;
}
70% {
   transform: translate(45vw, 5vh);
    background: white;
}
80% {
    transform: translate(45vw, 0vh);
    background:white;
}
90% {
    transform: translate(45vw, 5vh);
    background:white;
}
100% {
    transform: translate(45vw, 90vh);
     background-color:  white;
}
}

@keyframes secondball {
  0% {
    transform: translate(0px, 0px);
    background-color:   white;
  }
45% {
    transform: translate(45vw, 0px);
     background-color:  white;
  }
50% {
    transform: translate(45vw, 5vh);
    background: white;
}
60% {
  transform: translate(45vw, 0vh);
    background:white;
}
70% {
   transform: translate(45vw, 5vh);
    background: white;
}
80% {
    transform: translate(45vw, 0vh);
    background:white;
}
90% {
    transform: translate(45vw, 5vh);
    background:white;
}
100% {
    transform: translate(45vw, 90vh);
     background-color:  white;
}
}

@keyframes thirdball {
  0% {
    transform: translate(0px, 0px);
    background-color:   white;
  }
45% {
    transform: translate(45vw, 0px);
     background-color:  white;
  }
50% {
    transform: translate(45vw, 5vh);
    background: white;
}
60% {
  transform: translate(45vw, 0vh);
    background:white;
}
70% {
   transform: translate(45vw, 5vh);
    background: white;
}
80% {
    transform: translate(45vw, 0vh);
    background:white;
}
90% {
    transform: translate(45vw, 5vh);
    background:white;
}
100% {
    transform: translate(45vw, 90vh);
     background-color:  white;
}
}

@keyframes fourthball {
  0% {
    transform: translate(0px, 0px);
    background-color:   white;
  }
45% {
    transform: translate(45vw, 0px);
     background-color:  white;
  }
50% {
    transform: translate(45vw, 5vh);
    background: white;
}
60% {
  transform: translate(45vw, 0vh);
    background:white;
}
70% {
   transform: translate(45vw, 5vh);
    background: white;
}
80% {
    transform: translate(45vw, 0vh);
    background:white;
}
90% {
    transform: translate(45vw, 5vh);
    background:white;
}
100% {
    transform: translate(45vw, 52vh);
     background-color:  white;
}
}

$( document ).ready(function() {
$("#test1").prop("checked", false);


$("#test1").change(function(){
if($('#test1').is(':checked')){

    $('.option2cont').css('visibility','hidden');
    $('.option3cont').css('visibility','hidden');
    $('.option4cont').css('visibility','hidden');
    $('.option1cont label').css('visibility','hidden');
    $('.option1cont label p').css('visibility','visible');
    $('.option1cont label .ball').css('visibility','visible');

    $('.ball').addClass('question_1_ball_1');

    setTimeout(function(){ 
    $('.nextquestion').addClass('showquestionbutton');
    console.log('1000');
    }, 4005);
    console.log('checked');

} else {
    console.log('not checked');
}
});

$("#test2").change(function(){
if($('#test2').is(':checked')){
    $('.option1cont').css('visibility','hidden');
    $('.option3cont').css('visibility','hidden');
    $('.option4cont').css('visibility','hidden');
    $('.option2cont label').css('visibility','hidden');
    $('.option2cont label p').css('visibility','visible');
    $('.option2cont label .ball').css('visibility','visible');
    $('.ball').addClass('question_1_ball_2');
     console.log('checked');
} else {
    console.log('not checked');
}
});

$("#test3").change(function(){
if($('#test3').is(':checked')){
    $('.option1cont').css('visibility','hidden');
    $('.option2cont').css('visibility','hidden');
    $('.option4cont').css('visibility','hidden');
    $('.option3cont label').css('visibility','hidden');
    $('.option3cont label p').css('visibility','visible');
    $('.option3cont label .ball').css('visibility','visible');

    $('.ball').addClass('question_1_ball_3');
     console.log('checked');
} else {
    console.log('not checked');
}
});

$("#test4").change(function(){
if($('#test4').is(':checked')){
    $('.option1cont').css('visibility','hidden');
    $('.option2cont').css('visibility','hidden');
    $('.option3cont').css('visibility','hidden');
    $('.option4cont label').css('visibility','hidden');
    $('.option4cont label p').css('visibility','visible');
    $('.option4cont label .ball').css('visibility','visible');

    $('.ball').addClass('question_1_ball_4');
     console.log('checked');
} else {
    console.log('not checked');
}
});


});

.basket {
  position: absolute;
  top: 100vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 7rem;
  color: white;
}