Having trouble achieving smooth animation effects.
I've designed a burger icon using three divs:
<div class="container">
<div class="burger-contain">
<div id="line-1" class="line"></div>
<div id="line-2" class="line"></div>
<div id="line-3" class="line"></div>
</div>
</div>
I have defined separate keyframes for each line:
.line:first-child {
animation-name: firstChild;
transform-origin: 30px 25px;
animation-duration: 0.5s;
animation-fill-mode: forwards;
margin: 10px;
}
Here are the keyframes used:
@keyframes firstChild {
0% {transform: translateY(0);}
50% {transform: translateY(10px);}
100% {transform: rotate(-45deg);}
}
All three lines have slightly different animations. The second line disappears, while the third moves up instead of down.
To achieve the click function, I utilized jQuery to toggle between classes as follows:
$(document).ready(function(){
var line = $(".line");
var burger = $(".burger-contain")
var toggled = false;
burger.click(function(){
triggerAnimation();
});
function triggerAnimation(){
if (toggled === false){
line.removeClass("reverse");
line.addClass("animate");
toggled = true;
} else {
line.removeClass("animate");
line.addClass("reverse");
toggled = false;
}
}
});
To reverse the animation, I intended to use animation-direction: reverse; in my CSS like this:
.line:first-child.reverse {
animation-name: firstChild;
transform-origin: 30px 25px;
animation-duration: 0.5s;
animation-fill-mode: forwards;
margin: 10px;
animation-direction: reverse;
}
This is applied to all three lines. However, an issue arises where the animation stops functioning after the initial run. There seems to be no transition between the states, causing the animation to only work once in both directions - from Burger to Cross and vice versa.
Is there a flaw in my logic or am I misunderstanding the concept behind reversing animations?