Raddy Website Design & Development Tutorials

Fade In Fade Out animation in JavaScript and CSS

By Raddy in CSS / JavaScript ·

This weeks video is quick and simple and I hope that some people find it useful. Usually, jQuery makes such animations extremely simple to do, but with Vanilla JavaScript we need to write a few more lines of code which is not always great when we look for a quick solution. If we combine some JS and CSS3 we can achieve the fade in and out effect fairly easy and also CSS gives us some animation controls which is great. No need to include a library to your project just to make a simple animation effect work on all browsers.

<div>
	<img id="myLogo" src=" add image here ">
	<button id="myButton">Fade</button>
</div>
div {
  max-width: 900px;
  text-align: center;
}
#myLogo {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3 ease-in-out;
}
#myLogo.fade {
  opacity:0;
}
let mylogo = document.getElementById('myLogo');
document.getElementById('myButton').onclick = function(){
  mylogo.classList.toggle('fade');
}

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.