Unintended CSS Reversing Animation

Question

I'm trying to make an icon button to rotate on click, but every time I remove the class, it spins backwards, I wanted to do in a way that every time it's clicked, it only spins clockwise.

 const btn = document.querySelector('.reset-button'); btn.addEventListener("click", (e) => { btn.classList.add("rotate"); setTimeout(() => { btn.classList.remove("rotate"); }, 1500); });

 div { display: flex; flex-direction: row; justify-content: center; } .reset-button { transition: 1.5s; } .rotate{ transform: rotate(720deg); }

 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" /> <div> <button class="reset-button rotate"><span class="material-symbols-outlined"> refresh </span></button> </div>

Answer 1

You want the transition effect to occur only as the element transitions from 0 rotation to 720deg.

In the other direction (720deg to 0deg) you want it to happen instantly so the user sees no change.

Remove the transition from where it is and have it only on the rotating class.

 const btn = document.querySelector('.reset-button'); btn.addEventListener("click", (e) => { btn.classList.add("rotate"); setTimeout(() => { btn.classList.remove("rotate"); }, 1500); });

 div { display: flex; flex-direction: row; justify-content: center; } .reset-button {} .rotate { transform: rotate(720deg); transition: 1.5s; }

 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" /> <div> <button class="reset-button rotate"><span class="material-symbols-outlined"> refresh </span></button> </div>

Answer 2

While this might be on purpose, notice that besides for rotating back, your code doesn't rotate the button at all the first time it's clicked after the page is loaded.

Here's an alternate option (not the only way to do this) that rotates the button even when you click on it for the first time after the page was loaded in case that is of use to anyone.

 const btn = document.querySelector('.reset-button'); btn.addEventListener("click", (e) => { btn.style.transition = '1.5s'; btn.style.transform = 'rotate(720deg)'; setTimeout(() => { btn.style.transition = '0s'; btn.style.transform = 'rotate(0deg)'; }, 1500); });

 div { display: flex; flex-direction: row; justify-content: center; } .reset-button {}

 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" /> <div> <button class="reset-button rotate"><span class="material-symbols-outlined"> refresh </span></button> </div>

Answer 3

Only have the transition CSS property to the rotate class and so the animation will occur when rotate class is added, since the transition property was added in the reset-button class, the animation was happening at both times as when rotate class was added and removed.

Also initially remove the rotate class from HTML.

 const btn = document.querySelector('.reset-button'); btn.addEventListener("click", (e) => { btn.classList.add("rotate"); setTimeout(() => { btn.classList.remove("rotate"); }, 1500); });

 div { display: flex; flex-direction: row; justify-content: center; } .reset-button { } .rotate{ transition: 1.5s; transform: rotate(720deg); }