Getting started with animate.css | (#1 Animate.css Tutorial)

by | Apr 5, 2021 | 0 comments

Getting started with animate.css | (#1 Animate.css Tutorial)

by | Apr 5, 2021 | CSS Tips and Tricks | 0 comments



A quick tutorial on quickly adding CSS animations to your website, via the free animate.css library. One of the most simple things to start off as a beginner with our tips.

Today I am going to show you how to get started with animate.css. Animate.CSS is a collection of 75 common animation style which lets you apply to any element on the HTML page simply by adding a couple css classes to the element.
To get started the first step is to add animate.css source code to your project. you can either do so by downloading the code on the official site, or you can link to the CDN host version where you can find on Github page. The first example, we will make an h1 element bounce. for all of the animation, there is an option class name of infinite that can be added to each element in order for the animation of repeat infinitely. Once you added the class name of animated bounce and infinite to the h1 element, simply save and refresh the page. There are many creative ways of using animate.css while you don’t need any more to add your project you can easily extend these animations with jquery or vanilla javascript.

Animate.css Official Site: https://daneden.github.io/animate.css/

Original blog post: https://sunlightmedia.org/getting-started-with-animate-css-tutorial/

Subscribe to our channel for more digital marketing, branding, video production and web development tips!

Follow Us
https://sunlightmedia.org/
http://www.facebook.com/SunlightMedia
http://twitter.com/#!/designerLA
https://plus.google.com/+SunlightMediaLosAngeles
http://www.pinterest.com/sunlightmedia/

source

0 Comments

Submit a Comment

What Our Clients Are Saying

FS Designs

Leland is extremely knowledgeable and super pleasant to deal with. He helped me get my website running for my graphic...

F.S.

Dieno Digital Marketing Services
5
2018-06-19T18:50:18+00:00

F.S.

Leland is extremely knowledgeable and super pleasant to deal with. He helped me get my website running for my graphic design business and improved my SEO so that I appear more frequently and near the top of searches. He a great digital and web strategist and I would highly recommend his services.

Juju Hair Lounge

Great class! Not only was it very informative but it was also really entertaining! I can't wait to apply everything...

Leah

Dieno Digital Marketing Services
5
2018-07-09T03:06:21+00:00

Leah

Great class! Not only was it very informative but it was also really entertaining! I can't wait to apply everything I've learned to our Facebook business page!

Uniglobe Travel – Western Canada

I enjoyed the workshop, we covered a broad range of topics in a short space of time, but I appreciated...

Ciara

Dieno Digital Marketing Services
5
2018-07-10T03:22:20+00:00

Ciara

I enjoyed the workshop, we covered a broad range of topics in a short space of time, but I appreciated that there was some concrete, actionable advice given as well!

North Burnaby Boxing Club

Thanks so much for all the great work you have done in developing our website Leland!

Manny, North Burnaby Boxing Club

Dieno Digital Marketing Services
5
2018-04-27T01:06:02+00:00

Manny, North Burnaby Boxing Club

Thanks so much for all the great work you have done in developing our website Leland!
5
4
Dieno Digital Marketing Services
[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-name">First name or full name</label> <input class="tnp-name" type="text" name="nn" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-email">Email</label> <input class="tnp-email" type="email" name="ne" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>