Home / Programming / Bootstrap / Beautify Bootstrap Modal Animation With Animate.CSS

Beautify Bootstrap Modal Animation With Animate.CSS

/
/
/
825 Views

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  Prevent XSS Injection Attacks On PHP Easily

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  Adding Modern and Beautiful Link Effects with CSS3

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 …

  • Facebook
  • Twitter
  • Linkedin
  • Pinterest

6 Comments

Leave a Comment

Your email address will not be published. Required fields are marked *

This div height required for enabling the sticky sidebar
Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views :