CSS3画面上の特定の領域に形状をアニメ化する

Question

CSSアニメーションを使用して、少しクイズを作成しようとしています。ラジオボタンの円をその位置から少し包み込むようにします。

アニメーションが意図どおりに機能していますが、アニメーションを各回答の同じポイントで停止することはできません。これは、各質問が画面の下の方にあるためと考えています。

私の質問は、どのようにして各サークルが常にエンベロープのグラフィックになるのですか？

これまでの説明を理解するために、Codepenリンクを追加しました。私はあなたがそれを見るとき、私がそれを適切に説明していないならば、私がしようとしていることを正確に知っていると感じています。

https://codepen.io/MauriceMcErlean/pen/yPoJBE

HTML

<div class="ballcont question1"> 
<div class="question"> 
    <h2>This is the first Question.</h2> 
</div> 
<div class="inputselect"> 
    <form action="#"> 
     <div class="option1cont"> 
      <input type="radio" id="test1" name="test1"> 
      <label for="test1"> 
       <p>Mars 
        <p> 
      </label> 
      <div class="ball"></div> 
     </div> 

     <div class="option2cont"> 
      <input type="radio" id="test2" name="radio-group"> 
      <label for="test2"> 
       <p>The Moon</p> 
      </label> 
      <div class="ball"></div> 
     </div> 

     <div class="option3cont"> 
      <input type="radio" id="test3" name="radio-group"> 
      <label for="test3"> 
       <p>Earth</p> 
      </label> 
      <div class="ball"></div> 
     </div> 

     <div class="option4cont"> 
      <input type="radio" id="test4" name="radio-group"> 
      <label for="test4"> 
       <p>Venus</p> 
      </label> 
      <div class="ball"></div> 
     </div> 

     <a class="nextquestion">Next Question</a> 
    </form> 
    <div class="basket"> 
     <i class="fa fa-envelope-open-o" aria-hidden="true"></i> 
    </div> 
</div> 

キーフレーム

@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; 
} 
} 

ためのCSS JS

$(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'); 
} 
}); 


}); 

Answer 1

だけで変更に.basketクラスのCSSを追加します。

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

あなたはより多くのカスタマイズが必要な場合は私に知らせてください..

私は（唯一の最初のボールのために）あなたのためにそれを更新し、私はあなたを休ま考えます次のことができます。

更新リンク：https://codepen.io/ziruhel/pen/bYrZGW