CSS Transitions not working after adding class with JQuery

Ok, so Im trying to make a filter section for a gallery. Now I used some code from W3School that solved the filter part of it, but I want to also animate the appearing and disappearing of the pictures (imgs inside different divs) by shrinking and growing the divs with their content when the filter changes classes so that only certain pictures appear on screen. The thing is, they don´t seem to be working at all. I just used transform:scale and transition timing and ease on each class (one to display and the other to hide it).

I don´t have much expirience building sites, I actually started not long ago and need assistance.

<ul class="lista">
        <li class="selecc"><a id="todito" class="btn" onclick="filterSelection('all')">TODO</a><span>//</span></li>
        <li><a class="btn" onclick="filterSelection('arquitectura')">ARQUITECTURA PUBLICITARIA</a><span>//</span></li>
        <li><a class="btn" onclick="filterSelection('via')">VÍA PÚBLICA</a><span>//</span></li>
        <li><a class="btn" onclick="filterSelection('exhibidores')">EXHIBIDORES</a><span>//</span></li>
</ul>

<div class="box via"><img src="img/via_publica/lomax_via.jpg" alt="Lomax Via Pública 01"></div>
    <div class="box arquitectura"><img src="img/via_publica/loma2_via.jpg" alt="Loma Negra Via Pública 01"></div>
    <div class="box exhibidores"><img src="img/via_publica/loma_via.jpg" alt="Lomax Via Pública 02"></div>
    <div class="box via"><img src="img/via_publica/sommier_via.jpg" alt="Sommier Center Via Pública 01"></div>

.box{
    background:rgb(232,52,58);
    display:none;
    transform:scale(0);
    -moz-transition: 0.35s all ease;
    -webkit-transition: 0.35s all ease;
}
.show{
    display: block;
    transform:scale(1);
    -moz-transition: 0.35s all ease;
    -webkit-transition: 0.35s all ease;
}

<script>
    $(document).ready(function(){
        $(".lista li a").on('click', function(){
            $(".lista li.selecc").removeClass("selecc");
            $(this).closest('li').addClass("selecc");
        });
    });
        $(function(){
            $(window).scroll(function(){
                if($(window).scrollTop() >= 200){
                    $('header').addClass('scrolled');
                }
                else{
                    $('header').removeClass('scrolled');
                }
            });
        });

    filterSelection("all")
    function filterSelection(c) {
      var x, i;
      x = document.getElementsByClassName("box");
      if (c == "all") c = "";
      for (i = 0; i < x.length; i++) {
        RemoveClass(x[i], "show");
        if (x[i].className.indexOf(c) > -1) AddClass(x[i], "show");
      }
    }

    function AddClass(element, name) {
      var i, arr1, arr2;
      arr1 = element.className.split(" ");
      arr2 = name.split(" ");
      for (i = 0; i < arr2.length; i++) {
        if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
      }
    }

    function RemoveClass(element, name) {
      var i, arr1, arr2;
      arr1 = element.className.split(" ");
      arr2 = name.split(" ");
      for (i = 0; i < arr2.length; i++) {
        while (arr1.indexOf(arr2[i]) > -1) {
          arr1.splice(arr1.indexOf(arr2[i]), 1);     
        }
      }
      element.className = arr1.join(" ");
    }   
</script>