CSS3 Animation

The CSS3 Animation is a set of preset, play animations for your web projects. You only need to add the stylesheet to your website and apply the premade CSS classes to the elements you want animated.The CSS3 Animation uses CSS3 @ keyframes and works on all the latest browsers. Do not worry for older browsers users, the animated element will be visible even if the animation doesn’t trigger.

Add the animation stylesheet

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

Add an animation class to the element you want animated:

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

For entrance animations, you need to add visibility:hidden property to the animated element

#object{ visibility: hidden;}

Adding effects

Add jQuery to the element

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Add this before the tag to trigger the animation when the user scrolls to the element:

	$(window).scroll(function() {
		$('#animatedElement').each(function(){
		var imagePos = $(this).offset().top;
 
		var topOfWindow = $(window).scrollTop();
			if (imagePos < topOfWindow+400) {
				$(this).addClass("slideUp");
			}
		});
	});

Add this before the tag to trigger the animation when the user clicks on the element:

	$('#animatedElement').click(function() {
		$(this).addClass("slideUp");
	});

All working example with Demo / Downlod

Leave a Reply

Your email address will not be published. Required fields are marked *