Modal shake

by Andrey Izman

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <div class="container">
        <div class="row">
            <div class="col-sm-3"></div>
            <div class="col-sm-6">
                <h1>Bootstrap Modal Shake</h1>
                <hr>
                <button type="button" id="buttonModal" class="btn btn-primary">Show Modal Example</button>
            </div>
            <div class="col-sm-3"></div>
        </div>
    </div>

    <!-- Modal Example -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">Modal Example</h4>
                </div>
                <div class="modal-body">
                    <div style="line-height: 14px;">&nbsp;</div>
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="label" class="col-sm-3 control-label">Name</label>
                            <div class="col-sm-8">
                                <input type="text" id="name" class="form-control" placeholder="Your name here">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="image" class="col-sm-3 control-label">E-mail</label>
                           ...

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);
    }



        $('#myModal').modal('show');

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

        $('#buttonShake').click(function(event) {
            if (validateFields()) {
                $('#myModal').modal('hide');
            } 
            else {
                $('#myModal').shake("fast");
            }
        });

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