I am facing an issue with a CSS animation that I created. Everything seems to be working correctly, but I need to complete it by setting the input type to reset the animation.
Below is the CSS code snippet that should reset the animation:
$('button').on('click', function(){
var heading = $('h1').clone().removeClass();
$('h1').remove();
$('header').append(heading);
$('h1').addClass('fadein_element');
});
CSS Animation Section:
@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 ;
This was my basic HTML snippet 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 version:
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 am struggling to reset the animation and could use some help. Besides this issue, everything else is functioning properly. Any suggestions on how to make this work would be greatly appreciated, preferably using default HTML code...
Edit: Sharing minimal code that I am trying to fix
</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 Styles:
@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 ;
When I click on a "radio button," I want my (in this case st-panel-5) to reset the animation. Any of those 5 buttons should trigger this behavior, so I believe I could apply it to the st-panel class.