How to transition between big and small logo on scroll?

How would I transition between the two site logos when someone scrolls down without the other image just appearing in its new spot? Is there any way to transition nicely between the two images with CSS?