I am currently working on creating a button for a player. You can check out the video (here)
The button works, but in order to give it a "pressed" effect, I have to change its background-image on click. However, this action seems to override the transition that was already in place. The rotation part still functions properly, unlike the image swapping.
Not changing the image on pause or reverting it to the initial image does not yield the desired result.
I believe the solution may involve using @keyframes and handling everything manually, but I am searching for a cleaner approach.
Here is a demo: (I want to ensure that when clicked twice, the light-blue square transitions back to orange)
document.addEventListener("DOMContentLoaded", function () {
let state = "pause";
const playButton = document.getElementById("playIcon")
function playButtonClick() {
if (state === 'play') {
state = 'pause';
playButton.classList.remove("transitionBane");
playButton.style.backgroundImage = "url('https://placehold.co/600x400/aliceblue/white')";
} else {
state = 'play';
playButton.classList.add("transitionBane");
playButton.style.backgroundImage = "url('https://placehold.co/600x400/gray/white')";
}
}
addEventListener("click", playButtonClick)
});#playIcon {
top: 35%;
left: 40%;
position: absolute;
background-color: transparent;
background-repeat: no-repeat;
background-image: url("https://placehold.co/600x400/orange/white");
button:focus {outline:0;}
background-size: 100% 100%;
border: 0;
width: 18%;
height: 31.6%;
z-index: 52;
transform: rotate(0);
//animation: playButtonSwap1 2s alternate infinite ease-in-out;
transition: all 0.75s cubic-bezier(.71,0,.33,1.56) 0ms;
cursor: pointer;
}
#playIcon:hover {
transform: rotate(360deg);
background-image: url("https://placehold.co/600x400/aliceblue/white");
}
.transitionBane {
transition: none !important;
}<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8>
<title>Title>
</head>
<body>
<button id="playIcon></button>
</body>
</html>