Animations

Animations bring your page to life.

I fade in from the top
I fade in from the right with a 1.5s delay

Code

Direction

There are 4 classes for fading in.

				
<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.

				
<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>