I found this interesting piece of code:
let animation = document.getElementById('fave');
animation.addEventListener('click', function() {
$(animation).toggleClass('animate');
});.fave {
width: 70px;
height: 50px;
position: relative;
overflow: hidden;
}
.fave img {
position: absolute;
top: 0;
left: 0;
cursor: pointer;
animation: test_animate_reverse 1s steps(55);
}
.fave .animate {
animation: test_animate 1s steps(55);
left: -3519px;
}
@keyframes test_animate {
from {left: 0;}
to {left: -3519px;}
}
@keyframes test_animate_reverse {
from {left: -3519px;}
to {left: 0;}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="fave"><img src="https://cssanimation.rocks/images/posts/steps/twitter_fave_rectangle.png" id="fave"></section>The URL for the image in question is: (however, the images are displayed horizontally after modification).
Although the outcome seems well, I have some thoughts on it:
- Upon refreshing the browser window, my star always animates from the final frame back to the initial frame. I wish for it to only reverse-animation when toggling between 'active' and 'not active', rather than upon initial refresh.
- I believe using two identical
@keyframesfor reversing an animation is inefficient. Is there a way to achieve the same effect without creating a separate reverse@keyframes? - If a
sectionhas no parent element, can I still specify its size without explicitly doing so? - When rapidly clicking the image, I prefer the current animation to finish before starting the next one. Currently, previous animations abruptly end when a new one begins.
EDIT
I attempted to remove the reverse @keyframes by adjusting as follows:
.fave img {
position: absolute;
top: 0;
left: 0;
cursor: pointer;
animation: test_animate .7s steps(55);
animation-direction: reverse;
}
However, the animation disappeared entirely.