Animations


Specialy for you we created animations can use everywhere in your website. You can choose one of many different type of animations and also change position of elements appearance or order of them. If you want to set order of appearance, add data-animation-delay in markup to each next element more animation delay. For example the first element appears after 0.2s (data-animation-delay="200") and second element appears after 0.4s (data-animation-delay="400") from the begining of animation.

Below we present all classes of animations which you can use.

Model of animation yo-anim-(type of animation)-(direction)

type of animation
fade, zoyo, pop, flip
direction of animation
rt (to right), lt (to left), rtl (from right to left), ltr (from left to right), ttb (from top to bottom), btt (from bottom to top), x (horizontal), y (vertical), out (from in to out), in (from out to in)

Examples

yo-anim-fade-ltr
element fades from left to right (optional direction: "rtl", "btt", "ttb")
yo-anim-zoyo-in
element zooms from out to in (optional direction: "out")
yo-anim-pop-out
element pops from in to out
yo-anim-spin-lt
element spins to left (optional direction: "rt")
yo-anim-flip-x
element flips horizontal (optional direction: "y")
...
<div class="col-sm-6 col-md-4 feature-content">
	<div class="image yo-anim yo-anim-fade-ttb" data-animation-delay="200">
		<i class="icon-bulb"></i>
	</div>
	<div class="description yo-anim yo-anim-fade-btt" data-animation-delay="800">
		<h3>design</h3>
		<p>
Tiramisu bear claw pastry cheesecake. Cookie candy canes I love macaroon chocolate. Sweet roll pie apple pie. 
		</p>
	</div>
</div>
<div class="col-sm-6 col-md-4 feature-content">	
	<div class="image yo-anim yo-anim-fade-ttb" data-animation-delay="400">
		<i class="icon-size-fullscreen"></i>
	</div>
	<div class="description yo-anim yo-anim-fade-btt" data-animation-delay="1000">
		<h3>responsive</h3>
		<p>Tiramisu bear claw pastry cheesecake. Cookie candy canes I love macaroon chocolate. Sweet roll pie apple pie. 
		</p>
	</div>
</div>
<div class="col-sm-6 col-md-4 feature-content">
	<div class="image yo-anim yo-anim-fade-ttb" data-animation-delay="600">
		<i class="icon-check"></i>
	</div>
	<div class="description yo-anim yo-anim-fade-btt" data-animation-delay="1700">
		<h3>the best</h3>
		<p>
Tiramisu bear claw pastry cheesecake. Cookie candy canes I love macaroon chocolate. Sweet roll pie apple pie. 
		</p>
	</div>
</div>
<div class="col-sm-6 col-md-4 feature-content">
	<div class="image yo-anim yo-anim-fade-ttb" data-animation-delay="1100">
		<i class="icon-heart"></i>
	</div>
	<div class="description yo-anim yo-anim-fade-btt" data-animation-delay="1900">
		<h3>love</h3>
		<p>Tiramisu bear claw pastry cheesecake. Cookie candy canes I love macaroon chocolate. Sweet roll pie apple pie. 
		</p>
	</div>
</div>
<div class="col-sm-6 col-md-4 feature-content">
	<div class="image yo-anim yo-anim-fade-ttb" data-animation-delay="1300">
		<i class="icon-rocket"></i>
	</div>
	<div class="description yo-anim yo-anim-fade-btt" data-animation-delay="2100">
		<h3>fast delivery</h3>
		<p>Tiramisu bear claw pastry cheesecake. Cookie candy canes I love macaroon chocolate. Sweet roll pie apple pie. 
		</p>
	</div>
</div>
<div class="col-sm-6 col-md-4 feature-content">
	<div class="image yo-anim yo-anim-fade-ttb" data-animation-delay="1500">
		<i class="icon-envelope-letter"></i>
	</div>
	<div class="description yo-anim yo-anim-fade-btt" data-animation-delay="2300">
		<h3>easy contact</h3>
		<p>Tiramisu bear claw pastry cheesecake. Cookie candy canes I love macaroon chocolate. Sweet roll pie apple pie. 
		</p>
	</div>
</div>
...