Fade In Fade Out animation in JavaScript and CSS
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');
}Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
