CSS Animation Examples

How to create animated logo using css

If you are a website designer then you have already idea about ANIMATE.CSS animation library, Today in this article i will learn how to animate logo and all content of our website, Like animated social media icons, animated menu etc.

For use Animate.css first you have to add animate.css file and wow.min.js file in your head section.

Donwload Files

Add these file in your website head section and after that add this javascript code also in head section.

    new WOW().init();

Now lets know how to create animation. If you want to add animation in your logo then add class=”wow bounceIn”

 <img class="wow bounceIn" src="images/logo.png"  alt="">

How to add animation duration. To add animation duration just add this code in html tag (data-wow-duration=”8s”)

 <img class="wow bounceIn" src="images/logo.png" data-wow-duration="8s"  alt="">

How to add animation delay (to add animation delay just add this code (data-wow-delay=”0.5s”) in your html tag)

<img class="wow bounceIn" data-wow-delay="0.5s" data-wow-duration="8s"  src="images/logo.png">

Leave a Reply

Notify of