Fade-in/Fade-out animation using CSS3

Let us try a simple fade-in and fade-out animation in CSS3. Looks very simple, lets see how to achieve it. We will be using only CSS3 for the animations and only a little bit of java script for changing the CSS classes dynamically. First let’s check the demo,

Demo link: http://jbk404.site50.net/css3/fade/  (Check in Android/iOS mobile browser or Chrome/Safari/Firefox/Opera in your computer)

and this is is how the demo looks.

Fade in /Fade out animation

As you might know, CSS3 has added some very useful animations, transitions and transformations in its armory. Now using these techniques you can rotate, translate, skew etc, the HTML elements and not only that you can add effects to the transformations and also add easing effects, the things that are there in Flash. So the power now comes to HTML5/CSS3 as well and now animations can be created and run without the flash platform. We will not go much deeper into them and quickly talk about our demo application. You can learn everything about CSS3 and animations in W3Schools.com

Ok, now lets talk about our example. As you can see we have an image and a push button. When user clicks on the button (Fade out) the image simply fades out of view and then when user clicks on the button again the image fades in again. So, very simple and you can use the same techniques to create some nice gallery.

HTML elements
This is the basic HTML element structure that we will be using in our example.

<body>
    <h3>Simple fade-in/fade-out example</h3>
    <input id="myBtn" type="button" value="Fade Out" onclick="fade(this);" />
    <img id="myImg" src="images/chrome.png" />
</body>

Only two elements, the push button with an id value of myBtn and an image with an id of myImg.

CSS3 Transitions
CSS3 transitions are effects that let an element gradually change from one style to another.
To do this, you must specify two things:

  • Specify the CSS property you want to add an effect to
  • Specify the duration of the effect.
  • And also you can add an easing effect, better known as timing function for eg. ease-in, ease-out, linear

eg.

        #myImg
        {
            -webkit-transition: opacity 0.5s ease-in; //for chrome, safari
            -moz-transition: opacity 0.5s ease-in; //for mozilla firefox
            -o-transition: opacity 0.5s ease-in; //for opera
        }
Learn more about transition in W3Schools
In our example to fade out the image I have used the opacity property of CSS to decrease and increase the opacity.
Adding two states
As in our example we have two basic states, fade-in and fade-out. Lets create the CSS for them.
        #myImg.fade-out
        {
            opacity:0;
        }
        #myImg.fade-in
        {
            opacity:1;
        }

Here, #myImg is the CSS selector (id) for the image. And .fade-in and .fade-out are the two CSS classes corresponding to the two states. You can see that the opacity is made to 0 or 1 depending on which state to display.

Changing states
Here we need a little bit of java script to change the states dynamically. This is how to do it,

            if (btnElement.value === "Fade Out") {
                document.getElementById("myImg").className = "fade-out";
                btnElement.value = "Fade In";
            }
            else {
                document.getElementById("myImg").className = "fade-in";
                btnElement.value = "Fade Out";
            }

btnElement is the reference to the push button. The if statement checks the current label of the button and depending on that changes the CSS state. The code snippet should be very simple for you.
Now, when the class name of the image is changed dynamically, the browser immediately renders the new style as declared in the CSS declaration. So the opacity becomes either 0 or 1 depending on the need. Now, we have also registered the opacity property to the transition property, so whenever there is a change in opacity, it happens over time and you can see a nice effect.

-webkit-transition: opacity 0.5s ease-in;

Here is the complete code,

<!DOCTYPE html>
<html>
<head>
    <title>Simple Fade-in/Fade-out animation</title>
    <style type="text/css">
        /* Style for button */
        #myBtn
        {
            width:80px;
        }

        /* Style for image */
        #myImg
        {
            -webkit-transition: opacity 0.5s ease-in;
            -moz-transition: opacity 0.5s ease-in;
            -o-transition: opacity 0.5s ease-in;
        }
        #myImg.fade-out
        {
            opacity:0;
        }
        #myImg.fade-in
        {
            opacity:1;
        }

    </style>
    <script type="text/javascript">
        function fade(btnElement) {
            if (btnElement.value === "Fade Out") {
                document.getElementById("myImg").className = "fade-out";
                btnElement.value = "Fade In";
            }
            else {
                document.getElementById("myImg").className = "fade-in";
                btnElement.value = "Fade Out";
            }
        }
    </script>
</head>
<body>
    <h3>Simple fade-in/fade-out example</h3>
    <input id="myBtn" type="button" value="Fade Out" onclick="fade(this);" />
    <img id="myImg" src="images/chrome.png" />
</body>
</html>

And yes, you can write the code in a much better way than this. Here is the link to the demo once again: http://jbk404.site50.net/css3/fade/

How to make this work in IE?
As you might know, CSS3 properties and styles are supported from IE9 onwards, including IE9. So to make the code work in IE >= 9, just add the CSS3 prefix for transition as I have done for webkit, firefox and opera.

About these ads

8 thoughts on “Fade-in/Fade-out animation using CSS3

  1. Pingback: Cool modal Popup window with fade effect for mobile web – CSS3 and JavaScript « Joseph's RIA Lab

  2. This is really great. A smooth transition from opacities. If I had a link, and everytime I clicked the link my div faded, would it be possible to use this code?

  3. Hi, i read your blog from time to time and
    i own a similar one and i was just wondering if you get a lot of spam
    responses? If so how do you protect against it, any plugin or
    anything you can recommend? I get so much lately it’s driving me crazy so any help is very much appreciated.

  4. Would it be possible to use fadein and fadeout in the same javascript? I’ve been trying to get it to work but to no avail.

    document.getElementById(“pictureframe”).className = “fade-out”; //fadeout current picture
    document.getElementById(“pictureframe”).src = p; //set the picture frame to show the new picture
    document.getElementById(“MyElement”).className = document.getElementById(“MyElement”).className.replace(“fade-out”); //remove current class
    document.getElementById(“pictureframe”).className = “fade-in”; // fade this new pic in.

    am I missing something?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s