Animations

Animations bring your page to life.

Code

Direction

There are 4 classes for fading in.

• .fade-in-from-top
• .fade-in-from-bottom
• .fade-in-from-left
• .fade-in-from-right

				
<div class="fade-in-from-top">
I fade in from the top
</div>
<div class="fade-in-from-left">
I fade in from the right
</div>
				
			

Delays

You can delay an animation for up to 10 seconds.

The suffixes go up to 100. 5 is 0.5s, 25 is 2.5s and so on.

• .anim-delay--5
• .anim-delay--10
• .anim-delay--15
• .anim-delay--20

				
<div class="fade-in-from-top anim-delay--5">
I have 0.5s delay
</div>
<div class="fade-in-from-left anim-delay--50">
I have a 5s delay
</div>