Looking to enhance a next.js image with an animation? How about making it rotate 360 degrees upon each click? Despite my attempts at toggling classes, I can't seem to achieve the desired outcome. Any guidance would be greatly appreciated. Thank you in advance!
I've already experimented with this code snippet, but haven't been able to make it work as intended:
<Image
src="/images/user_rotate.png"
height={20}
width={20}
alt="user_rotate"
onClick={rotate_user}
id="rotate_user"
/>
function rotate_user(){
var rotation_symbol = document.getElementById("rotate_user");
rotation_symbol.classList.toggle("rotated");
}
Here's a glimpse of my CSS-Module:
.rotated {
animation: rotation 2s;
}
@keyframes rotation {
0% {
transform: rotate(32deg)
}
10% {
transform: rotate(64deg)
}
20% {
transform: rotate(96deg)
}
30% {
transform: rotate(128deg)
}
40% {
transform: rotate(160deg)
}
50% {
transform: rotate(192deg)
}
60% {
transform: rotate(224deg)
}
70% {
transform: rotate(256deg)
}
80% {
transform: rotate(288deg)
}
90% {
transform: rotate(310deg)
}
100% {
transform: rotate(360deg);
}
}