CSS - reset animation

I have an issue with animation created using CSS. Everything is working fine, I just need to finish this and set input type to reset animation.

Here is my CSS that should reset animation:

$('button').on('click', function(){
var heading = $('h1').clone().removeClass();
$('h1').remove();
$('header').append(heading);
$('h1').addClass('fadein_element');

});

CSS animation

@keyframes fadein {
0%   { opacity: 0; }
100% { opacity: 1; }
enter code here

.fadein{-webkit-animation: fadein 3s ease-in ;
            -moz-animation: fadein 3s ease-in ;
             animation: fadein 3s ease-in ;

This was my basic html for that part:

<input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
<a href="#st-panel-1">WebGear</a>

And here is the edited one:

input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
<a href="#st-panel-1"><h1 class="fadein_element"><button class="fadein_element">WebGear</button></h1></a>

I got lost in it and nothing resets the animation. Other than that it works fine. To sum it up, do you guys have any ideas how to get this working? Preferably with default html code...

Edit: Posting a minimal code which I am trying to get working

</head>
<body>
<div class="st-container">
        
<input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
<a href="#st-panel-1">Something</a>

<input type="radio" name="radio-set" id="st-control-2"/>
<a href="#st-panel-2">Happiness</a>

<input type="radio" name="radio-set" id="st-control-3"/>
<a href="#st-panel-3">Tranquillity</a>

<input type="radio" name="radio-set" id="st-control-4"/>
<a href="#st-panel-4">Positivity</a>

<input type="radio"  name="radio-set" id="st-control-5"/>
<a href="#st-panel-5"> WebGear</a>

<div class="st-scroll">

    <section class="st-panel" id="st-panel-5">
        <div class="st-deco" data-icon="H"></div>
<div id="section1"> 
<div id="menu"> <img id="menuitem" src="Images/Menuitem.png"/>
<div id="hlava">
<div id="flashContent">
---Here goes the content---
There are just closing tags

And CSS

@keyframes fadein {
0%   { opacity: 0; }
100% { opacity: 1; }
}
.fadein{-webkit-animation: fadein 3s ease-in ;
            -moz-animation: fadein 3s ease-in ;
             animation: fadein 3s ease-in ;

Once I click on "radio button" I want my (in this case st-panel-5) to reset animation. Any of those 5 buttons will do that so I believe I could apply that to class st-panel.

Solution

To solve this you set all but the checked radio input's targeted st-panel to display: none; opacity: 0, and then set animation: fadein ...; to the checked radio input's targeted st-panel-nn id.

Than Click the 2 first radio inputs to check the behavior

#st-control-1:checked ~ .st-scroll .st-panel:not(#st-panel-1),
#st-control-2:checked ~ .st-scroll .st-panel:not(#st-panel-2) {
  opacity: 0;
  display: none;
}

#st-control-1:checked ~ .st-scroll #st-panel-1,
#st-control-2:checked ~ .st-scroll #st-panel-2 {
  animation: fadein 1.5s ease-in;
}

@keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

<div class="st-container">

  <input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
  <a href="#st-panel-1">Something</a>

  <input type="radio" name="radio-set" id="st-control-2"/>
  <a href="#st-panel-2">Happiness</a>

  <input type="radio" name="radio-set" id="st-control-3"/>
  <a href="#st-panel-3">Tranquillity</a>

  <input type="radio" name="radio-set" id="st-control-4"/>
  <a href="#st-panel-4">Positivity</a>

  <input type="radio"  name="radio-set" id="st-control-5"/>
  <a href="#st-panel-5"> WebGear</a>

  <div class="st-scroll">

    <section class="st-panel" id="st-panel-1">
      <div class="st-deco" data-icon="H"></div>
      <div id="section1"> 
        <div id="menu"> <img id="menuitem" src="Images/Menuitem.png"/>
          <div id="hlava">
            <div id="flashContent">
            Some content 1
            </div>
          </div>
        </div>          
      </div>
    </section>

    <section class="st-panel" id="st-panel-2">
      <div class="st-deco" data-icon="H"></div>
      <div id="section1"> 
        <div id="menu"> <img id="menuitem" src="Images/Menuitem.png"/>
          <div id="hlava">
            <div id="flashContent">
            Some content 2
            </div>
          </div>
        </div>          
      </div>
    </section>

  </div>
</div>