<h1>Select one:</h1>
<div id="radios">
  <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 id="slider"></span>
</div>

*{margin:0;padding:0;box-sizing:border-box;}
body{background:teal;color:#fff;padding-bottom:10%;}
h1{text-align:center;margin:20% 0 5%;font-family:verdana;font-weight:100;}
#radios{
  position:relative;
  width:50%;
  margin:0 auto;
}
input[type="radio"]{
  position:absolute;
  right:1000%;
}
label{
  float:left;
  width:15%; padding-bottom:15%;
  margin:0 2.5%;
  background:rgba(255,255,255,.2);
  border-radius:50%;
  cursor:pointer;
}
#slider{
  position:absolute;
  left:0%; top:0;
  width:10%; padding-bottom:10%;
  margin:2.5% 0 0 5%;
  background:#fff;
  transition:transform 1s;
  border-radius:50%;
  animation-timing-function: ease-in-out;
  animation-duration:.3s;
  animation-fill-mode: forwards;
  transition: 0.2s left .05s ease-in-out;
}
#input1:checked  ~ #slider{ animation-name: input1; left:0; }
#input2:checked  ~ #slider{ animation-name: input2; left:20%; }
#input3:checked  ~ #slider{ animation-name: input3; left:40%; }
#input4:checked  ~ #slider{ animation-name: input4; left:60%; }
#input5:checked  ~ #slider{ animation-name: input5; left: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); } }

/*** nothing here ***/