quisiera saber si : Hay alguna forma de reiniciar la animación de una transición en css? me explico: al momento de dar click varias veces a una imagen en una galería vaya de saturacion 0% a 100%, y que no vaya de 100% a 0%.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
body{
text-align: center;
background-color: black;
}
img{
border: solid white 2px;
}
.saturada{
filter: saturate(0%)
}
.normal{
transition: 4s;
filter: saturate(100%)
}
.main img{
width: 700px;
height: 500px;
}
.second img{
width: 100px;
height: 100px;
filter: saturate(0%)
}
</style>
<title>Ejercicio Nro. 2</title>
</head>
<body>
<div class="main"><img src="assets/img/coronas.jpg" alt="" class="grande saturada"></div>
<div class="second">
<img src="https://picsum.photos/200/300?image=0" alt="" class="chica">
<img src="https://picsum.photos/200/300?image=1" alt="" class="chica">
<img src="https://picsum.photos/200/300?image=2" alt="" class="chica">
<img src="https://picsum.photos/200/300?image=3" alt="" class="chica">
<img src="https://picsum.photos/200/300?image=4" alt="" class="chica">
</div>
<script>
$(".chica").on("click", function(){
ruta = $(this).attr("src");
$(".grande").attr("src", ruta);
$(".grande").toggleClass("normal")
})
</script>
</body>
</html>
Esto es lo que tengo.