Simple tips animation by CSS (keyframe)

gistfile1.html

<style type="text/css">
body {
    margin: 10px;
}

.tips {
    border: 1px solid #000;
    padding: 5px;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

.wiggle {
    -webkit-animation: wiggle 1s;
    -moz-animation: wiggle 1s;
    -ms-animation: wiggle 1s;
    -o-animation: wiggle 1s;
    animation: wiggle 1s;
}

@-webkit-keyframes wiggle {
     0% {-webkit-transform:translate3d(0,    0px, 0); -webkit-animation-timing-function: ease-in; }
    10% {-webkit-transform:translate3d(0,   -5px, 0); -webkit-animation-timing-function: ease-out; }
    25% {-webkit-transform:translate3d(0,    7px, 0); -webkit-animation-timing-function: ease-in; }
    40% {-webkit-transform:translate3d(0,  -14px, 0); -webkit-animation-timing-function: ease-out; }
    55% {-webkit-transform:translate3d(0,   10px, 0); -webkit-animation-timing-function: ease-in; }
    70% {-webkit-transform:translate3d(0,   -7px, 0); -webkit-animation-timing-function: ease-out; }
    85% {-webkit-transform:translate3d(0,    5px, 0); -webkit-animation-timing-function: ease-in; }
   100% {-webkit-transform:translate3d(0,    0px, 0); }
}
</style>

<script language="javascript">
(function($) {

    $(document).ready(function() {
        setInterval(function() {
            $(".tips").removeClass('wiggle');
            
            setTimeout(function() {
                $(".tips").addClass('wiggle');
            }, 1000);
        }, 5000);
    });
    
})(jQuery);
</script>

<div class="tips">
    This is a test
</div>