Beautify Bootstrap Modal Animation With Animate.CSS
Beautify Bootstrap Modal Animation With Animate.CSS

Beautify Bootstrap Modal Animation With Animate.CSS

Bootstrap has many beautiful features. One of the most familiar bootstrap features is Modal. For those who don’t know what modal is, modal is a popup menu provided by Bootstrap. With the modal, it is no longer difficult for us to make a minimalist responsive popup again.

Modal bootstrap itself actually already has a default animation that is fade animation. For those of you lovers of design, of course it is very boring if the animation shown is all. Well, this time we will discuss how to enhance your boostrap modal with Animate.Css.

Get straight to the point of the discussion, please visit https://daneden.github.io/animate.css/ to see examples of what animations are available. Now for more details, I’ll just show the table. Is as follows :

Animation Code
bounceflashpulse
rubberBandshakewobble
headShakeswingtada
bounceInLeftbounceOutDownfadeIn
jellobounceInbounceInDown
bounceInRightbounceInUpbounceOut
bounceOutLeftbounceOutRightbounceOutUp
fadeInDownfadeInDownBigfadeInLeft
fadeInLeftBigfadeInUpBigfadeOutLeft
fadeInRightfadeInRightBigfadeInUp
fadeOutfadeOutDownfadeOutDownBig
fadeOutLeftBigfadeOutRightfadeOutRightBig
fadeOutUpflipOutXrotateIn
fadeOutUpBigflipInXflipInY
flipOutYlightSpeedInlightSpeedOut
rotateInDownLeftrotateInDownRightrotateInUpLeft
rotateInUpRightrotateOutUpLeftrollIn
rotateOutrotateOutDownLeftrotateOutDownRight
rotateOutUpRighthingejackInTheBox
rollOutzoomInzoomInDown
zoomInLeftzoomOutDownslideInDown
zoomInRightzoomInUpzoomOut
zoomOutLeftzoomOutRightzoomOutUp
slideInLeftslideInRightslideInUp
slideOutLeftslideOutRightslideOutUp
heartBeatslideOutDown 

Beautify Bootstrap Modal Animation With Animate.CSS

And for implementation, please add animate class followed by the type of animation. Example: <div class = “animate rollIn”> </div>. For application to bootstrap modal, please pay attention to the following modal code:

look at this syntax :

Recommended  How to Make Rupiah Format Function for Number Using PHP

change ‘fade’ with “animate (animation type)”, for example, rollIn animation, while chance becoming :

So if we apply directly with all css and js bootstrap, then the complete coding is as follows:

Please copy and see the results, don’t forget if you want to change the animation type, please change the bounce to another animation type.

Live Demo
Recommended  3. How to Install Apache, MySQL and PHP in Ubuntu 18.04 LTS Part 2

Download Source Code

Hopefully this article is useful about beautifying the bootstrap modal animation with this animate.css. Please share, don’t forget to comment if there is something you don’t understand …

[Total: 2    Average: 5/5]

Detri Amelia Chandra

Hello, I introduce myself Detri Amelia Chandra. Some of my expertise is in System Analysis, Database Design, Artificial Neural Networks and a little in Programming. Check out my thoughts about the world on my blog. I updated this blog a bit rarely, so please keep visit my blog here often ...

This Post Has 6 Comments

  1. Alhamdulillah… tutorialnya sangat simple, padat dan sangat mudah diterapkan…

  2. Terimakasih, pembelajaran yg sangat bermanfaat…

Leave a Reply

Close Menu