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');
}Support This Work
If you found this guide helpful, consider supporting me with a small donation. Your contribution helps me keep these tutorials up to date and create more quality content.
Scan to donate
Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
