Animations

We created animations can use to all elements 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="container">
			<img src="img/logo18.png" class="yo-anim yo-anim-fade" data-animation-delay="100"/>
			<div class="col-md-12">
				<div class="col-md-6">

					<a href="#" class="btn btn-white btn-lg pull-right yo-anim yo-anim-fade" data-animation-delay="700">LATEST NEWS</a>
				</div>
				<div class="col-md-6">

					<a href="#" class="btn btn-white btn-lg pull-left yo-anim yo-anim-fade" data-animation-delay="800">CHECK OUR MENU</a>
				</div>
			</div>
			<div class="clearfix"></div>


			<div class="open-daily col-md-3 yo-anim yo-anim-fade" data-animation-delay="200">
				<span class="day">Monday - Thursday</span>
				<span class="hours">7.00 - 21.00</span>
			</div>
			<div class="open-daily  col-md-3 yo-anim yo-anim-fade" data-animation-delay="300">
				<span class="day">Friday - Sunday</span>
				<span class="hours">7.00 - 23.00</span>
			</div>
			<div class="simple-contact  col-md-3 yo-anim yo-anim-fade" data-animation-delay="400">
				<span class="address">Armii Krajowej 17</span>
				<span class="postal-code">58-100 Świdnica</span>
			</div>
			<div class="simple-contact col-md-3 yo-anim yo-anim-fade" data-animation-delay="500">
				<span class="mobile"><a href="#">+48 889 889 889</a></span>
				<span class="email"><a href="#">restaurant@berg.com</a></span>
			</div>
		...