How to create a modal with HTML, CSS & JS - Part 4: JavaScript continued

With the modal working, we want to add a nice little fade in and fade out effect. Because we can't transition the display property, instead we want to transition its opacity. To do this, I create a couple of very simple CSS animations, that we use inside of the JavaScript. Also, to get things to work properly on fade out, I add in a new event listener - animationend - to only change the display property only once the modal has faded out. If not, it would display: none before the animation is done, defeating the purpose! --- My Code Editor: VS Code - https://code.visualstudio.com/ How my browser refreshes when I save: https://youtu.be/h24noHYsuGc --- Support me on Patreon: https://www.patreon.com/kevinpowell I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Instagram: https://www.instagram.com/kevinpowell.co/ Twitter: https://twitter.com/KevinJPowell Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell