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>
See Question&Answers more detail:os