background-images are not in the the list of animatable properties
As was explained in one of your other threads, you are essentially using multiple background images when you combine your gradients with your bg image.
There might be some workaround using opacity but I'm not sure how it would work in your case.
You can however use this other workaround with pseudo ::before and ::after elements to take the place of those linear gradients.
You can run the full code from this...
audio-transition.zip (2.2 KB)
.playButtonb {
transition:5s;
position: relative;
width: 260px;
height: 260px;
cursor: pointer;
border: 3px solid #0059dd;
background: url("https://i.imgur.com/6wOeaWN.png") 0 0;
}
.playButtonb.active {
border: 3px solid #e77d19;
background-position: 0 -260px;
}
.playButtonb::before,
.playButtonb::after {
transition:5s;
content:"";
position:absolute;
top:0;
left:83px;
width:3px;
height:100%;
background:#0059dd;
}
.playButtonb::after { left:174px;}
.playButtonb.active::before,
.playButtonb.active::after {
background:#e77d19;
}