: CSS3 animation to start only when page is scrolled to the right place I want to show an CSS3 animation with a delay, but it is below the fold of the page, meaning, that animation may start

@Bryan171

You can use jQuery (or make it plain JS) to add a class when a certain point has been reached.

var classHadBeenAdded = false;
$(document).on('scroll', function(){
if( !classHadBeenAdded && $(document).scrollTop() < foldValue ){
$('#element').addClass('ClassWithAnimation');
classHadBeenAdded = true; // save change so it doesnt double.
}
});


You might want to add a dethrottle to it to prevent the number of calls jamming your browser.



Another method is a variant, make transition-delay something very high, and change that value with JS upon the triggerpoint.

Vote Up Vote Down