Animacja fade in css / js

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');
         
    }
})}
);

 

Answer 1

Animacja dla fade-in

.fade-in {
    -webkit-animation: fadein 1s; 
            animation: fadein 1s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}