[TUTORIAL] Using Animate.css - Printable Version

[TUTORIAL] Using Animate.css - Printable Version

+- Sinisterly (https://sinister.li)
+-- Forum: Design (https://sinister.li/Forum-Design)
+--- Forum: Web Design (https://sinister.li/Forum-Web-Design)
+--- Thread: [TUTORIAL] Using Animate.css (/Thread-TUTORIAL-Using-Animate-css)

[TUTORIAL] Using Animate.css - Oxyrus - 06-24-2015

Well, it's an incredible tool, with it you can give your elements a fancy look.

You can use jQuery to make it do even more awesome things, but for this tutorial I'm going to explain how simple is to setup and use it.

First of all, you must go to the download and preview site: https://daneden.github.io/animate.css/

There, you must see what effect(s) do you want, download it and then simple add it to your HTML head.

Code:
<link rel="stylesheet" href="animate.css" type="text/css">

And then just call it using animated and the name of the effect that you want.

Let's say we have a div called article

Code:
<div class="article">
Here goes your content
</div>

To use animate now, it should be something like

Code:
<div class="article animated bounce">
Here goes your content
</div>

bounce is the name of the effect you want to use, you can check their names on the website Wink

And that's it, one of thousands of ways to make an awesome site.

RE: [TUTORIAL] Using Animate.css - Jasper - 07-09-2015

Easy, but nice tutorial.

RE: [TUTORIAL] Using Animate.css - Fusion - 07-09-2015

Nice tut, been looking into getting back into web design.

RE: [TUTORIAL] Using Animate.css - Kotomi - 08-11-2015

Looks nice. I prefer to make my own animations but this is mostly all the ones I can come up with.