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
`bounce`	`flash`	`pulse`
`rubberBand`	`shake`	`wobble`
`headShake`	`swing`	`tada`
`bounceInLeft`	`bounceOutDown`	`fadeIn`
`jello`	`bounceIn`	`bounceInDown`
`bounceInRight`	`bounceInUp`	`bounceOut`
`bounceOutLeft`	`bounceOutRight`	`bounceOutUp`
`fadeInDown`	`fadeInDownBig`	`fadeInLeft`
`fadeInLeftBig`	`fadeInUpBig`	`fadeOutLeft`
`fadeInRight`	`fadeInRightBig`	`fadeInUp`
`fadeOut`	`fadeOutDown`	`fadeOutDownBig`
`fadeOutLeftBig`	`fadeOutRight`	`fadeOutRightBig`
`fadeOutUp`	`flipOutX`	`rotateIn`
`fadeOutUpBig`	`flipInX`	`flipInY`
`flipOutY`	`lightSpeedIn`	`lightSpeedOut`
`rotateInDownLeft`	`rotateInDownRight`	`rotateInUpLeft`
`rotateInUpRight`	`rotateOutUpLeft`	`rollIn`
`rotateOut`	`rotateOutDownLeft`	`rotateOutDownRight`
`rotateOutUpRight`	`hinge`	`jackInTheBox`
`rollOut`	`zoomIn`	`zoomInDown`
`zoomInLeft`	`zoomOutDown`	`slideInDown`
`zoomInRight`	`zoomInUp`	`zoomOut`
`zoomOutLeft`	`zoomOutRight`	`zoomOutUp`
`slideInLeft`	`slideInRight`	`slideInUp`
`slideOutLeft`	`slideOutRight`	`slideOutUp`
`heartBeat`	`slideOutDown`

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:

&lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalContoh"&gt;
			  Klik Saya
			&lt;/button&gt;
			&lt;div class="modal fade" id="modalContoh" tabindex="-1" role="dialog" aria-hidden="true"&gt;
				&lt;div class="modal-dialog" role="document"&gt;
					&lt;div class="modal-content"&gt;
						&lt;div class="modal-header bg-dark text-light"&gt;
							&lt;h5 class="modal-title"&gt;Contoh Modal&lt;/h5&gt;
							&lt;button type="button" class="close text-light" data-dismiss="modal" aria-label="Close"&gt;
							  &lt;span aria-hidden="true"&gt;×&lt;/span&gt;
							&lt;/button&gt;
						&lt;/div&gt;
						&lt;div class="modal-body"&gt;
							Isi modal
						&lt;/div&gt;
						&lt;div class="modal-footer"&gt;
							&lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Tutup&lt;/button&gt;
						&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;

Klik Saya

</button>

<h5 class="modal-title">Contoh Modal</h5>

</button>

</div>

Isi modal

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>

</div>

look at this syntax :

&lt;div class="modal fade" id="modalContoh" tabindex="-1" role="dialog" aria-hidden="true"&gt;

1	<div class="modal fade" id="modalContoh" tabindex="-1" role="dialog" aria-hidden="true">

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

&lt;div class="modal animated rollIn" id="modalContoh" tabindex="-1" role="dialog" aria-hidden="true"&gt;

1	<div class="modal animated rollIn" id="modalContoh" tabindex="-1" role="dialog" aria-hidden="true">

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


&lt;!doctype html&gt;
&lt;html lang="en"&gt;
	&lt;head&gt;
		&lt;meta charset="utf-8"&gt;
		&lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
		&lt;meta name="description" content="Integrasi Modal Bootstrap dengan Animate.css"&gt;
		&lt;meta name="author" content="Detri Amelia Chandara"&gt;
		&lt;meta name="generator" content="Jekyll v3.8.5"&gt;
		&lt;title&gt;Percantik Animasi Modal Bootstrap dengan Animate.css&lt;/title&gt;
		&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"&gt;
		&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
	&lt;/head&gt;
	&lt;body class="bg-light"&gt;
		&lt;div class="container text-center mt-3 pt-3"&gt;
			&lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalContoh"&gt;
			  Klik Saya
			&lt;/button&gt;
			&lt;div class="modal animated rollIn" id="modalContoh" tabindex="-1" role="dialog" aria-hidden="true"&gt;
				&lt;div class="modal-dialog" role="document"&gt;
					&lt;div class="modal-content"&gt;
						&lt;div class="modal-header bg-dark text-light"&gt;
							&lt;h5 class="modal-title"&gt;Contoh Modal&lt;/h5&gt;
							&lt;button type="button" class="close text-light" data-dismiss="modal" aria-label="Close"&gt;
							  &lt;span aria-hidden="true"&gt;×&lt;/span&gt;
							&lt;/button&gt;
						&lt;/div&gt;
						&lt;div class="modal-body"&gt;
							Isi modal
						&lt;/div&gt;
						&lt;div class="modal-footer"&gt;
							&lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Tutup&lt;/button&gt;
						&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;footer class="my-5 pt-5 text-muted text-center text-small"&gt;
			&lt;p class="mb-1"&gt;© 2019 Detri Amelia Chandra&lt;/p&gt;
		&lt;/footer&gt;
		&lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
		&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
		&lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
		&lt;script src="//code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
	&lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

<title>Percantik Animasi Modal Bootstrap dengan Animate.css</title>

</head>

Klik Saya

</button>

<h5 class="modal-title">Contoh Modal</h5>

</button>

</div>

Isi modal

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>

</div>

</footer>

</body>

</html>

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.

[the_ad id=”651″]

Live Demo

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 …

Tags: Bootstrap CSS HTML

Comments 6

Detri Amelia Chandra says:

6 years ago

Komentarin aja ya, jangan malu malu…

Pingback: Penerapan Jquery Mask Untuk Angka Pada Form HTML dan PHP - Detri Amelia Chandra
Rahmat Hidayat says:

6 years ago

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

- Detri Amelia Chandra says:
  
  6 years ago
  
  Alhamdulillah, semoga membantu 🙂
  
Nesya says:

6 years ago

Terimakasih, pembelajaran yg sangat bermanfaat…

- Detri Amelia Chandra says:
  
  6 years ago
  
  Terimakasih sudah berkunjung… 😀

Beautify Bootstrap Modal Animation With Animate.CSS

Related Posts

14. PHP Forms – Validation With Required Fields

13. New Performing PHP Form Handling

12. Learn PHP Global Variables – Superglobals With Example

11. PHP Array Example, Complete Editions

Application of Jquery Mask For Numbers in HTML and PHP Forms

Prevent XSS Injection Attacks On PHP Easily

Comments 6

Leave a Reply Cancel reply

Recommended

4. PHP Syntax and PHP Variables

Adding Modern and Beautiful Link Effects with CSS3

7. Understanding PHP Condition If Else, Elseif Statements

14. PHP Forms – Validation With Required Fields

Instagram Feed