jQuery Waypoints & Animate CC not working in Firefox

[donboe]

I am using jQuery Waypoints in combination with CSS animate. In order to trigger multiple items I have the following function:

	var contentWayPoint = function() {
		var i = 0;
		$('.animate-box').waypoint( function( direction ) {
			if( direction === 'down' && !$(this.element).hasClass('animated') ) {
				i++;
				$(this).addClass('item-animate');
				setTimeout(function(){
					$('body .animate-box.item-animate').each(function(k){
						var el = $(this);
						setTimeout( function () {
							el.addClass('fadeInUp animated');
							el.removeClass('item-animate');
						},  k * 750, 'easeInOutExpo' );
					});
					
				}, 150);
				
			}

		} , { offset: '80%' } );
	};

In order to have the items beeing not visible when entering the Viewport I have this in the CSS:

.animate-box {
  	opacity: 0;
}

This works ok in Chrome, Safari and even IE. But for some reason It isn’t working in Firefox. When I leave the animate-box declaration out of my CSS it is working in FF as well but that the items are visible when they are coming into view and than the animation start over.

[PaulOB]

A working demo would help to see what’s going on:)

[donboe]

Hi Paul. Thx for the reply. Here is the link. I mean the three boxes with spring, summer and authum.

Edit: Hi Paul i found the sollution. I added:

.animate-box.animated{
    opacity: 1;
}

to the css and it is working great now.