A forma de utilizar é muito simples, basta adicionar o arquivo css animation e inserir a classe ao objeto que deve ser animado, exemplo:

Inserção do CSS das animações:

<link rel="stylesheet" href="css/animations.css">

Adicionando classe ao objeto que será animado:

<div id="object" class="slideUp">

Abaixo você pode conferir o resultado das animações, clique nos links para ver os diversos efeitos:

CSS:

Javascript:

Html:

Para fazer com que a animação seja ativada quando o usuário ver o item, você deve colocar este código em Javascript e css, sendo que, deve ser carregado o Jquery antes:

CSS:

#object{
	background-color: #fe5652;
	visibility: hidden;
}

JS:

<script>
	$(window).scroll(function() {
		$('#animatedElement').each(function(){
		var imagePos = $(this).offset().top;

		var topOfWindow = $(window).scrollTop();
			if (imagePos < topOfWindow+400) {
				$(this).addClass("slideUp");
			}
		});
	});
</script>

Para ver o exemplo, acessem este LINK.

Esperamos que tenham gostado e aprendido, dúvidas e sugestões deixem nos comentários, isto incentiva-nos a sempre compartilhar conhecimento cada vez mais!