<input type="radio" class="but1" checked name="rt">
<input type="radio" class="but2" name="rt">
<input type="radio" class="but3" name="rt">

<div class="block1">text1</div>
<div class="block2">text2</div>
<div class="block3">text3</div>


 

div{
  background-color:#00fff0;
  overflow:hidden;
  font-size:30px;
  height: 0px; 
  animation-duration: 3s;
  animation-timing-function: linear;  
  animation-iteration-count: 1; 
  animation-name:revers ;
}

.but1:checked ~ .block1{
   
   height: 200px; 
  
  animation-duration: 3s;
  animation-timing-function: linear;  
  animation-iteration-count: 1; 
  animation-name:show;
}


.but2:checked ~ .block2{
  color:#f0f;
  
   height: 200px; 
  
  animation-duration: 3s;
  animation-timing-function: linear;  
  animation-iteration-count: 1; 
  animation-name:show;
}

.but3:checked ~ .block3{
  color:#f0f;
  
   height: 200px; 
  
  animation-duration: 3s;
  animation-timing-function: linear;  
  animation-iteration-count: 1; 
  animation-name:show;
}


@keyframes  show {
0% { max-height: 0px; } 
50% { max-height: 0px; }
70% { max-height: 70px; }
100% { max-height: 200px; }
}

@keyframes  revers {
100% { height: 0px; } 
50% { height: 0px; }
30% { height: 70px; }
0% { height: 200px; }
}