<!DOCTYPE html>
<html lang="en-US" class="no-js">
	<head>
		<link rel="stylesheet" href="css/animations.css" type="text/css">

		<!-- STUFF JUST FOR THIS TEMPLATE -->
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
		<link rel="stylesheet" href="example-assets/style.css" type="text/css">
	</head>
	<body>
		<header class='mainHeader'>
			<div class='container'>
				<div class='animatedParent' data-sequence='500' >
					<h1 class='animated growIn slower'  data-id='1'>CSS3 Animate It</h1>
					<h2 class='animated bounceInRight slower'  data-id='2'>Because static content is boring!</h2>
					<div class='buttons-inline animated bounceInLeft slower'   data-id='3'><a class="btn btn-primary" href="index.php">See Functions</a></div>
					<div class='buttons-inline animated bounceInRight slower' data-id='4'><a class='btn btn-default' href='https://github.com/Jack-McCourt/css3-animate-it/archive/master.zip'>Download!</a></div>
					<div class='animated bounceInUp findMe' data-id='5'>Find me at <a  target="_blank" href='http://jackonthe.net'>jackonthe.net</a></div>
				</div>
			</div>
		</header>
		<div class='container animations' style='margin-bottom:30px'>
			<div class='animatedParent'>
				<h2 class='animated growIn slowest'>Animations</h2>
			</div>

			<!-- bounceIn -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>bounceIn</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("bounceIn"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated bounceIn slow'></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>

			<!-- bounceInDown -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>bounceInDown</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("bounceInDown"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated bounceInDown slow'></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>

			<!-- bounceInRight -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>bounceInRight</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("bounceInRight"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated bounceInRight slow'></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>
			
			<!-- bounceInUp -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>bounceInUp</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("bounceInUp"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated bounceInUp slow'></div></div>
			</div>


			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>
			
			<!-- bounceInLeft -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>bounceInLeft</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("bounceInLeft"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated bounceInLeft slow'></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>

			<!-- fadeInDown -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>fadeInDown</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("fadeInDown"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated fadeInDown '></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>

			<!-- fadeInUp -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>fadeInUp</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("fadeInUp"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated fadeInUp '></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>

			<!-- fadeInLeft -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>fadeInLeft</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("fadeInLeft"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated fadeInLeft '></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>

			<!-- fadeInRight -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>fadeInRight</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("fadeInRight"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated fadeInRight '></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>
			
			<!-- fadeIn -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>fadeIn</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("fadeIn"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated fadeIn slowest'></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>

			<!-- growIn -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>growIn</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("growIn"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated growIn slow'></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>

			<!-- shake -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>shake</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("shake"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated shake slow'></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>

			<!-- shakeUp -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>shakeUp</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("shakeUp"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated shakeUp slow'></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>

			<!-- rotateIn -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>rotateIn</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("rotateIn"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated rotateIn slow'></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>

			<!-- rotateInUpLeft -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>rotateInUpLeft</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("rotateInUpLeft"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated rotateInUpLeft slow'></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>

			<!-- rotateInDownLeft -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>rotateInDownLeft</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("rotateInDownLeft"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated rotateInDownLeft slow'></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>

			<!-- rotateInUpRight -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>rotateInUpRight</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("rotateInUpRight"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated rotateInUpRight slow'></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>

			<!-- rotateInDownRight -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>rotateInDownRight</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("rotateInDownRight"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated rotateInDownRight slow'></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>
			
			<!-- rollIn -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>rollIn</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("rollIn"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated rollIn slow'></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>
			
			<!-- wiggle -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>wiggle</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("wiggle"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated wiggle slow'></div></div>
			</div>
			
			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>
			
			<!-- swing -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>swing</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("swing"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated swing slow'></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>
			
			<!-- tada -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>tada</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("tada"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated tada slow'></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>
			
			<!-- wobble -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>wobble</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("wobble"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated wobble slow'></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>
			
			<!-- pulse -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>pulse</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("pulse"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated pulse slow'></div></div>
			</div>


			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>
			
			<!-- lightSpeedInRight -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>lightSpeedInRight</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("lightSpeedInRight"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated lightSpeedInRight'></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>
			
			<!-- lightSpeedInLeft -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>lightSpeedInLeft</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("lightSpeedInLeft"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated lightSpeedInLeft'></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>
			
			<!-- flip -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>flip</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("flip"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated flip'></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>
			
			<!-- flipInX -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>flipInX</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("flipInX"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated flipInX slowest'></div></div>
			</div>

			<div class='animatedParent'>
				<hr class='animated fadeIn slow' />
			</div>
			
			<!-- flipInY -->
			<div class='animatedParent row article'>
			
				<div class='col-md-4'>
					
					<h3 class='animated bounceInUp padded'>flipInY</h3>
				</div>
				<div class='animatedParent col-md-6'>
<pre class='animated growIn slow'>
<?php echo htmlspecialchars("<h2 class='animated "); ?><span class='highlighter'><?php echo htmlspecialchars("flipInY"); ?></span><?php echo htmlspecialchars("'>It Works!</h2>"); ?>
</pre>
				</div>
				<div class='col-md-2'><div class='repeat animated flipInY slowest'></div></div>
			</div>

			
			

		</div>
		<div class='animatedParent' data-sequence='1000'>
			<footer class='animated growIn' data-id='1'>
				<div class='container'>
					<div class='row'>
						<p class="col-md-10">&copy;2014 All rights reserved. Designed by Jack McCourt at <b><a href='http://jackonthe.net' class='animated bounceInRight' data-id='2'>jackonthe.net</a></b></p>
					</div>
				</div>
			</footer>
		</div>
	</body>
</html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='js/css3-animate-it.js'></script>

<script>
$(document).ready(function(){
	$.doTimeout(2500, function(){
		$('.repeat.go').removeClass('go');

		return true;
	});
	$.doTimeout(2520, function(){
		$('.repeat').addClass('go');
		return true;
	});
	
});

</script>

<script>
