A simple but Awesome animation with CSS3 for Your Modals.
Today I’m going to show some ways to do animations only with CSS3 and html,
We need a simple index.html file and a style.css file too. For this case I’ll work only in code pen be cause Iwant to show you my demo. Then Iadded Bootstrap 4 by cdn but I only added the CSS.
after that I created a div with the container class and I added a primary button, into the container I added another div with those classes (that div will be our animated modal):
ok if you check the modal has a shadow class that is for appear a shadow in all window and into that shadow we have another div that is our modal container with the class main modal, ok the clickevents are for show or hide our modal but we are working this after in the course.
In the CSS We need to display with a zindex in 2 for the shadow and obviously with the position in absolute after that we need to set the width to 100% and the height to 100vh, also we need to set the background in almost transparent for this rgba colors its perfect and finally we centered all with flex;
Excelent the next step is create the magic classes
First we have the hide class here we need to set the zindex to -1, the opacity to 0, the scale transform in 0 and we set the animation hide(we will create this after) to .25s;
After that we created a hide keyframes and the next is only logic the from case is the opposite for we want it, and the to case is the end of our animation. we are working manly with the transform scale attribute tin the from we need to set in 1 and the ‘to ’ we need to set for 0;
for the show modal case is exactly the opposite for the hide case
The javascript
First we added a script in the end of the html to set to hide class to the modal selecting the modal by id with querySelector() and then we put the class hideModal to hide it
On JS
Ok the next step is create the functions to enable and disable the modal (openModal, closeM). those functions consist in select de modal by id and put or remove the showModal Class
Ok thats all you can check the final result in code pen only click in https://codepen.io/josephatR/pen/vQRWGo?editors=1010
Thanks for read my post see you soon! :D
