CSS-filter transition

Question

my query is : Whenever I press any button for the first time, the image successfully transitions to the desired filter in 4 seconds. But when I press another button the transition takes place immidiately without 4 seconds. How do I make the picture change in 4 seconds everytime I press the buttons?.

function change_image() {
  document.getElementById("blur").style.filter = "sepia(1)";
}

function change_image_2() {
  document.getElementById("blur").style.filter = "grayscale(100%)";
}

function change_image_3() {
  document.getElementById("blur").style.filter = "blur(5px)";
}

#blur {
  transition-duration: 4s;
}

<div id="blur">
  <img src="http://placehold.it/300" alt="whatever" height="400" width="300">
</div>
<br>
<button class="btn btn-success" type="button" onclick="change_image()">Sepia</button>
<button class="btn btn-success" type="button" onclick="change_image_2()">Grayscale</button>
<button class="btn btn-success" type="button" onclick="change_image_3()">Blur</button>

Answer 1

To be able to transition from one filter to an other, you need to have the same <filter_function> list inside your style declaration between the states.

It seems that otherwise browsers won't do the transition, even if you force to come back to none...

So the solution is to always declare all your <filter_functions>, and just set their argument to 0.

function change_image() {
  document.getElementById("blur").style.filter = "sepia(1) grayscale(0%) blur(0px)";
}

function change_image_2() {
  document.getElementById("blur").style.filter = "sepia(0) grayscale(100%) blur(0px)";
}

function change_image_3() {
  document.getElementById("blur").style.filter = "sepia(0) grayscale(0%) blur(5px)";
}

#blur {
  transition: all 4s;
}

<div id="blur">
  <img src="http://placehold.it/300" alt="whatever" height="400" width="300">
</div>
<br>
<button class="btn btn-success" type="button" onclick="change_image()">Sepia</button>
<button class="btn btn-success" type="button" onclick="change_image_2()">Grayscale</button>
<button class="btn btn-success" type="button" onclick="change_image_3()">Blur</button>

---

I didn't checked completely the underlying reasons yet, but from fast-reading this, I would say that browsers would be able to use a correct number interpolation between same filters, but wouldn't with different ones.

Now how is it able to work out the first transition from none to any filter ?
One more mystery...