<div class="inputradio11">
  <label for="input1">ネコ</label>
  <input id="input1" name="radio" type="radio" />
  <label for="input2">イヌ</label>
  <input id="input2" name="radio" type="radio" />
  <label for="input3">ウサギ</label>
  <input id="input3" name="radio" type="radio" />
  <label for="input4">リス</label>
  <input id="input4" name="radio" type="radio" />
  <label for="input5">トリ</label>
  <input id="input5" name="radio" type="radio" />
  <span class="slider"></span>
</div>

.inputradio11 {
  position:relative;
  width:50%;
  margin:0 auto;
  display: flex;
  flex-direction: column;
}
/*デフォルトのラジオボタンの設定*/
.inputradio11 input[type='radio'] {
  display: none;
}
.inputradio11 label{
  position: relative;
  display: flex;
  align-items: center;
  cursor:pointer;
  margin-bottom: 30px;
  padding-left: 40px;
}
.inputradio11 label::before {
  position: absolute;
  left: 0;
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  background:rgba(218,60,65,.5);
  border-radius:50%;
  cursor:pointer;
}
.inputradio11 .slider {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  margin: 2px 0 0 5px;
  background: #da3c41;
  border-radius: 50%;
  animation-duration: .3s;
  transition: 0.2s top .05s ease-in-out;
}
/*クリックした時に下に動く*/
#input1:checked  ~ .slider{ animation-name: input1; top:0; }
#input2:checked  ~ .slider{ animation-name: input2; top:20%; }
#input3:checked  ~ .slider{ animation-name: input3; top:40%; }
#input4:checked  ~ .slider{ animation-name: input4; top:60%; }
#input5:checked  ~ .slider{ animation-name: input5; top:80%; }
/*クリックした時のアニメーション*/
@keyframes input1{ 30%, 70% { transform:scale(0.5); } }
@keyframes input2{ 30%, 70% { transform:scale(0.5); } }
@keyframes input3{ 30%, 70% { transform:scale(0.5); } }
@keyframes input4{ 30%, 70% { transform:scale(0.5); } }
@keyframes input5{ 30%, 70% { transform:scale(0.5); } }