My goal is to create a loading animation using CSS transitions and animations. I have managed to achieve the initial loading effect by scaling with transition and then animating it to scale out on the x-axis. However, when attempting to transition back to the original state, it snaps back instead of smoothly transitioning. While I could use animation for the entire process, I want to ensure that the page continues to load without requiring additional JavaScript logic to handle it. Ideally, the transition should occur automatically without any sudden movements.
Upon clicking the snippet below, the first click works as intended. However, subsequent clicks cause it to snap back to the original state without transitioning. Changing the property to something like opacity in the animation section works correctly, leading me to believe there may be an issue with the browser not recognizing the current scaled value. Is this a bug or am I missing something in my implementation?
document.querySelector('.wrapper').addEventListener('click', () => {
document.querySelector('.wrapper').classList.toggle('loading')
}).wrapper{
position:fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wrapper > div{
color: white;
display:flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: blue;
transition: transform 500ms ease-out;
transform: scale(1);
}
.wrapper.loading > div{
transform: scale(0.2, 0.002);
animation: loading 1000ms ease-out infinite;
animation-delay: 500ms;
}
@keyframes loading {
0%{
transform: scale(0.2, 0.002)
}
50%{
transform: scale(0.5, 0.002)
}
100%{
transform: scale(0.2, 0.002)
}
}<div class="wrapper">
<div>click me</div>
</div>