title: CSS - reset animation
body: <p>I have an issue with animation created using css. Everything is working fine, I just need to finish this and <strong>set input type to reset animation.</strong> </p>
  
  <p>Here is my css that should reset animation:</p>
  
  <pre><code>$('button').on('click', function(){
  var heading = $('h1').clone().removeClass();
  $('h1').remove();
  $('header').append(heading);
  $('h1').addClass('fadein_element');
  </code></pre>
  
  <p>});   </p>
  
  <p>CSS animation</p>
  
  <pre><code>@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 ;
  </code></pre>
  
  <p>This was my basic html for that part:</p>
  
  <pre><code>&lt;input type="radio" name="radio-set" checked="checked" id="st-control-1"/&gt;
  &lt;a href="#st-panel-1"&gt;WebGear&lt;/a&gt; 
  </code></pre>
  
  <p>And here is the edited one:</p>
  
  <pre><code>input type="radio" name="radio-set" checked="checked" id="st-control-1"/&gt;
  &lt;a href="#st-panel-1"&gt;&lt;h1 class="fadein_element"&gt;&lt;button class="fadein_element"&gt;WebGear&lt;/button&gt;&lt;/h1&gt;&lt;/a&gt; 
  </code></pre>
  
  <p>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... </p>
  
  <p><strong>Edit: Posting a minimal code wich I am trying to get working</strong></p>
  
  <pre><code>&lt;/head&gt;
  &lt;body&gt;
  &lt;div class="st-container"&gt;
  
  &lt;input type="radio" name="radio-set" checked="checked" id="st-control-1"/&gt;
  &lt;a href="#st-panel-1"&gt;Something&lt;/a&gt;
  
  &lt;input type="radio" name="radio-set" id="st-control-2"/&gt;
  &lt;a href="#st-panel-2"&gt;Happiness&lt;/a&gt;
  
  &lt;input type="radio" name="radio-set" id="st-control-3"/&gt;
  &lt;a href="#st-panel-3"&gt;Tranquillity&lt;/a&gt;
  
  &lt;input type="radio" name="radio-set" id="st-control-4"/&gt;
  &lt;a href="#st-panel-4"&gt;Positivity&lt;/a&gt;
  
  &lt;input type="radio"  name="radio-set" id="st-control-5"/&gt;
  &lt;a href="#st-panel-5"&gt; WebGear&lt;/a&gt;
  
  &lt;div class="st-scroll"&gt;
  
      &lt;section class="st-panel" id="st-panel-5"&gt;
          &lt;div class="st-deco" data-icon="H"&gt;&lt;/div&gt;
  &lt;div id="section1"&gt; 
  &lt;div id="menu"&gt; &lt;img id="menuitem" src="Images/Menuitem.png"/&gt;
  &lt;div id="hlava"&gt;
  &lt;div id="flashContent"&gt;
  ---Here goes the content---
  There are just closing tags
  </code></pre>
  
  <p>And CSS</p>
  
  <pre><code>@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 ;
  </code></pre>
  
  <p>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 belive I could apply that to class st-panel.</p>