Creating animation is css

[coding_noobie]

I’ve created a ‘sticky’ menu bar but when I scroll down the page it just swaps from one to the other. Ideally I’d like to the animate between the two, similar to this:

The code I’ve got that changes the css of the menu bar is: https://www.reflex-nutrition.com

<script>
$(function() {
	var sticky_navigation_offset_top = $('#fullmenu').offset().top;
	var sticky_navigation = function(){
		var scroll_top = $(window).scrollTop();
		if (scroll_top > sticky_navigation_offset_top) { 
			$('#fullmenu').css({ 'position': 'fixed', 'top':60, 'width':'100%', 'z-index':1000 });
			$('#logo_nav_sticky').css({ 'height': '40px','width': '61px','margin-top': '10px' });
			$('#logoline').css({ 'position': 'fixed','top': '0', 'z-index':2000, 'margin-top': '0px', 'height': '60px', 'left': 0, 'right': 0 });
			$('#search').css({ 'margin': '10px 20px 0 437px' });
			$('#header-top-intl').css({ 'display': 'none' });
			$('#tel').css({ 'display': 'none' });
			$('#fixed_nav').css({ 'display': 'block' });
			$('#static_nav').css({ 'display': 'none' });
			$('#basket').css({ 'top': '10px', 'left': 6 });
			$('#topnav').css({ 'width': '240px' });
			$('#header-top-dispatch').css({ 'display': 'none' });
		} else {
			$('#fullmenu').css({ 'position': 'relative','top':0, 'z-index':10 });
			$('#logo_nav_sticky').css({ 'height': '95px','width': '145px','margin-top': '0px' });
			$('#logoline').css({ 'position': 'relative','top':0,'margin-top': '10px', 'height': '100px' });
			$('#header-top-intl').css({ 'display': 'block' });
			$('#tel').css({ 'display': 'block' });
			$('#fixed_nav').css({ 'display': 'none' });
			$('#static_nav').css({ 'display': 'block' });
			$('#search').css({ 'margin': '40px 20px 0 207px' });
			$('#basket').css({ 'top': '40px' });
			$('#topnav').css({ 'width': '330px' });
			$('#header-top-dispatch').css({ 'display': 'block' });
		}   
	};
	sticky_navigation();
	
$(window).scroll(function() {
	sticky_navigation();
	});
});
</script>

[djsmithme]

Have a look at CSS3 transitions to add animation to your menu.

Quick example: https://jsfiddle.net/mjb4e5nw/

If you use .addClass/ .removeClass and have an animation transition attached to that style it’ll animate when you add/remove the class.

[coding_noobie]

I had a look at changing it to addClass and then removeClass (I referred to that example) but unfortunately that stopped it working completely. I’ll have a look at css transitions though thanks