Fade In and Out With Pure CSS Javascript (Simple Examples)

Welcome to a tutorial on how to fade in and out using pure CSS and Javascript. So you may want to fade in a section on selection, or maybe fade a button out once it is clicked on. Some libraries provide a convenient fade function, but we really don’t need to load an entire library just to do a simple fade effect.

A fade effect can be achieved with CSS transition and setting the opacity.

  • Attach CSS opacity transition on the element – <div id="demo" style="transition: opacity 1s">DEMO</div>
  • To fade out – document.getElementById("demo").opacity = 0
  • To fade in – document.getElementById("demo").opacity = 1

That covers the basic idea, let us walk through some examples in this guide – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Fade In & Out Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

FADE IN & OUT EFFECT

All right, let us now get into the examples of fading in & out using CSS and Javascript

 

1) FADE ON CLICK

1-basic.html
<style>
/* (A) FADE ANIMATION */
#fadeA { transition: opacity 1s; }
#fadeA.hide { opacity: 0; }
</style>
 
<!-- (B) FADE DEMO -->
<p id="fadeA">This will fade.</p>
<button onclick="document.getElementById('fadeA').classList.toggle('hide')">
  Toggle
</button>

This will fade.

As in the introduction above, attaching a transition: opacity and toggling the opacity is all we need. CSS animation will do the rest of the magic.

P.S. opacity: 0 will only set the element to “invisible”, it retains its dimensions. If you want to collapse it, try #fadeA.hide { opacity: 0; max-height: 0; }.

 

2) FADE ON MOUSE HOVER

2-fade-hover.html
/* (A) FADE ANIMATION */
#fadeB { transition: opacity 1s; }
#fadeB:hover { opacity: 0; }
 
<!-- (B) FADE DEMO -->
<p id="fadeB">This will fade on hover.</p>

This will fade on hover.

Yep, it’s that simple. Just use the :hover CSS pseudo-class to help you.

 

 

3) FADE USING CSS ONLY

3-css-fade.html
<style>
/* (A) HIDE CHECKBOX */
#fadeC { display: none; }
 
/* (B) CHECKED > FADE */
#fadeD { transition: opacity 1s; }
#fadeC:checked + #fadeD { opacity: 0; }
</style>
 
<!-- (C) FADE DEMO -->
<label for="fadeC">Click to fade.</label>
<input type="checkbox" id="fadeC"/>
<p id="fadeD">This will fade.</p>

No Javascript, no problem. This is a small “checkbox trick” that we use.

  • We create a hidden <input type="checkbox"/>, but it can still be toggled using a <label>.
  • Finally, use the CSS sibling + OR ~ selector to toggle the show/hide.
  • #fadeC:checked + #fadeD in plain English – If the fadeC checkbox is checked, we hide fadeD.

 

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

Fade Elements WIth CSS JS (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published.