Bootstrap Snippet Bootstrap V4 Modal Zoom & Bounce Animation using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<br><br>
<div class="container">
    <div class="row text-center">
        <div class="col">
            <h1>Modal Zoom & Bounce Animation</h1>
            <p>First two examples already available in Bootstrap V4. It's super simple and just add class and it will convert as super side out the panel. Yes, It's Responsive. :)</p>
            <p>To view more samples Visit <a href="https://bootsnipp.com/pradeep330">Here</a></a></p>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">
                Launch demo modal sideout small
            </button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal3">
                Launch demo modal sideout normal
            </button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal4">
                Launch demo modal sideout large
            </button>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2" aria-hidden="true">
  <div class="modal-dialog modal-dialog-slideout modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal sideout small</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.modal.fade .modal-dialog.modal-dialog-slideout {-webkit-transform: translate(0,0);transform: translate(0,0);}
.modal.fade.show .modal-dialog.modal-dialog-slideout {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
    -webkit-animation-duration: 450ms;
    animation-duration: 450ms;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;}
@-webkit-keyframes bounceIn{
  0%{
    opacity: 0;
    -webkit-transform: scale(0.3) translate3d(0,0,0);
            transform: scale(0.3) translate3d(0,0,0);
  }
  50%{
    opacity: 0.9;
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  80%{
    opacity: 1;
    -webkit-transform: scale(0.89);
            transform: scale(0.89);
  }
  100%{
    opacity: 1;
    -webkit-transform: scale(1) translate3d(0,0,0);
            transform: scale(1) translate3d(0,0,0);
  }
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap V4 Modal Zoom & Bounce Animation"
Bootstrap 4.0.0 Snippet by pradeep330

Related: See More

Questions / Comments:

"Bootstrap V4 Modal Zoom & Bounce Animation" Bootstrap 4.0.0 Snippet by pradeep330

Related: See More

Questions / Comments:

"Bootstrap V4 Modal Zoom & Bounce Animation"
Bootstrap 4.0.0 Snippet by pradeep330