Transitions in Website using Animate.css – A CSS3 Library

Transitions makes website attractive specially when you need it to be all devices compatible. But when it comes to CSS3 you need to write keyframes. Omit this part and Learn how to use Animate.CSS. Wonderful CSS Library to make website attractive.

You ever heard about CSS3 and Transitions in Website then you are standing at correct post which is made from CSS3 , from this post you will learn or understand putting transitions in website without coding add some attributes and you will learn it. A bit history about Animation and CSS3.

CSS3 comes with something creative called transitions. Transition features in CSS3 which were not possible using CSS only, you have to use JavaScript earlier for some animation purpose.

Now a days animations are possible with key frames introduced in CSS3. Everyone is just crazy about putting transitions in website makes a webpage creative and interactive.

Key frames actually bit complicated when you start writing codes, this problem can be tackle by some of the libraries available online. But I consider sharing a worth library called Animate CSS I use most of the time.

Here is the simple example of fade in using CSS key frames. This is bit complicated without library.

HTML Markup

<div id="example" class="animated animation-name"></div>

CSS Style

/*
* Animation configurations ( duration and fill mode )
*/
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
/*
* FadeIn animation
*/
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
/*
* FadeOut animation
*/
@-webkit-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes fadeOut{
0% {opacity: 1;}
100% {opacity: 0;}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}

Why dive into code when we have library and a good tutorial on how to implement I will write the code of bounce effect so you can make animation in website. Get Library here and include in your page.

  1. How to Include library in your page.
    <head>
    ...
    <link rel="stylesheet" type="text/css" media="all" ref="css/animate.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    ...
    </head>
  2. Now make any div add class “animated and other class bounce or anything.
    <div class=" animated bounce">This text will animate.</div>
  3. Do you want to make it more interactive? Suppose if you want user scroll then animation fired. Then add another class.
    <div class=" animated bounce eds-on-scroll ">This text will animate.</div>

You’re done what if you want animation fired on hover or on click or on scroll. Don’t worry here is the website which will generate animation styles automatically.

Click to Generate and Preview Classes

Above website you show animation live and will generate a class for you. Give you many options to configure which is handy and easy. Generate your Class from above URL and just add like this don’t forgot to add animated where you want animation in website. by adding this library you

<div id="example" class="animated generated-class-name"></div>

Here is the Video Tutorial Hope this will guide you to

Transitions in Website

Leave a Reply

Your email address will not be published. Required fields are marked *