add modal open animation

[saiful7778]

I added modal opening animation. It should increase user experience. Here I use custom tailwind animation keyframe properties and custom tailwind animation. By default, modal opening animation is enabled.

Would you mind, can you provide me with some suggestions for expanding my skills? I think you have good enough knowledge to improve me which is very helpful for my web development career.

Without animation

Screencast from 11-27-2023 12:36:16 AM.webm

With animation

Screencast from 11-27-2023 12:35:24 AM.webm

[netlify[bot]]

✅ Deploy Preview for keep-react-sm ready!

Name	Link
🔨 Latest commit	edfc8292e3e47438ef58c92f4e9e9f977e1a4ba6
🔍 Latest deploy log	https://app.netlify.com/sites/keep-react-sm/deploys/656393344046b60008937d5b
😎 Deploy Preview	https://deploy-preview-84--keep-react-sm.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Arifulislam5577]

Dear @saiful7778,

Great job on your recent contribution! Your work on the modal animation is fantastic, and I appreciate your efforts.

I see that you're interested in adding animation to our component library, and I'm thrilled about that! You're more than welcome to proceed with adding the animation.

However, I noticed that the animation keyframe code has been placed in the wrong location. To ensure the animation is applied universally, please move the animation code to the keep-preset.ts file under the boxShadow object. Placing it in tailwind.config.ts would limit the animation to our website and not the keep-react package.

Thanks again for your valuable contribution, and we look forward to seeing more from you. Best of luck with your ongoing contributions!

Best regards, Md Ariful Islam.