Modal shake

by Andrey Izman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">



<div class="modal" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" id="buttonShake" class="btn btn-primary">Shake <i class="glyphicon glyphicon-ok"></i></button>
      </div>
    </div>
  </div>
</div>

CSS

/*  
 * Bootstrap Modal Shake
 * @Version : 1.1
 * @Release : 2015-03-07
 * @Author  : Anderson Costa <[email protected]>
 */

@charset "UTF-8";

.animated {
    -webkit-animation-duration: 0.8s;
    -moz-animation-duration: 0.8s;
    -o-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.fast {
    -webkit-animation-duration: 0.6s;
    -moz-animation-duration: 0.6s;
    -o-animation-duration: 0.6s;
    animation-duration: 0.6s;
}

.animated.slow {
    -webkit-animation-duration: 1.0s;
    -moz-animation-duration: 1.0s;
    -o-animation-duration: 1.0s;
    animation-duration: 1.0s;
}

.shake {
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
    -o-animation-name: shake;
    animation-name: shake;
}

@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translateX(10px);
    }
}

@-moz-keyframes shake {
    0%, 100% {
        -moz-transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        -moz-transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        -moz-transform: translateX(10px);
    }
}

@-o-keyframes shake {
    0%, 100% {
        -o-transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        -o-transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        -o-transform: translateX(10px);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

JavaScript

/*
     * function shake animation
     * animate: A string determining how long the animation will run.
     * complete: A function to call once the animation is complete.
     */
    jQuery.fn.shake = function(animate, complete) {

        var self = $(this);

        // add animate param, if defined
        var shake = animate != undefined ? 'animated ' + animate + ' shake' : 'animated shake';

        // add class shake
        self.addClass(shake);

        setTimeout(function() {
            // remove class shake
            self.removeClass(shake);

            // complete callback
            if (complete != undefined) {
                complete();
            }
            // 1s timeout is equal to slow animation
        }, 1000);
    }



setTimeout(() => {
        $('#myModal').modal('show');

        $('#buttonModal').click(function(event) {
            $('#myModal').modal('show');
        });

        $('#buttonShake').click(function(event) {
            $('#myModal').shake("slow");
        });

        function validateFields() {
            if ($('#name').val() == '' || $('#mail').val() == '') {
                return false;
            } else {
                return true;
            }
        }
}, 500);