Animacja fade in w css

Question

Cześć, mam taki prosty skrypt, który robi, że jeśli zescrolluje slider od id "main" to wtedy mam fixed menu, wszystko ładnie i pieknie działa tylko chciałabym zrobić animację fade in

Czyli jak przescrolluje id "main" to do #navbar dodaje się klasa np "animacja", ttylko teraz pytanie jak ogarnąć tą animacje w css, animacji za bardzo nie ogarniam, a chciałabym, żeby to menu ładnie się pojawiało w stylu fade in

#main {
width:100%;
background-color:red;
}

#fixed {
position:fixed;
top:0px;
}

$(document).ready(function() {
  $(window).bind('scroll', function() {
    // The value of where the "scoll" is.
	var div_top = jQuery('#main').offset().top;
    if($(window).scrollTop() > div_top){
$('#navbar').addClass('fixed'); 
    }else{
      $('#navbar').removeClass('fixed');
		
    }
})}
);