Bootstrap Navbar-changing logo on scroll

I have somehow managed to change the logo (img src) on scroll with JS ofcourse. Now I am stuck, how can i add transition while the logos are changing ('src').

Here is the code: Html:

<a class="navbar-brand mx-auto" href="/">
    <div class="navbar-brand-img">
        <img src="img/logo/full.png" class="animate" alt="">        
    </div>
</a>

Javascript:

<script>
        $(function () { 
            $(window).scroll(function () {
                if ($(this).scrollTop() > 1000) { 
                    $('.navbar-brand-img img').attr('src','img/logo/half.png');
                }
                if ($(this).scrollTop() < 1000) { 
                    $('.navbar-brand-img img').attr('src','img/logo/full.png');
                }
            })
        });
    </script>

Css:

.navbar-brand-img img {
    -webkit-transition: all 3s;
    transition: all 3s;
}