Fade In Fade Out animation in JavaScript and CSS

Raddy CSS, JavaScript Leave a Comment

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.

HTML
<div>
<img id="myLogo" src=" add image here ">
<button id="myButton">Fade</button>
</div>
CSS

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;
}
JS

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 *