animate.css

animcss.css

#testElement {
  margin: auto;
  width: 50%;
  animation-duration: 2.8s;
  animation-delay: 1.2s;
  animation-iteration-count: infinite;
}

.click-animations {
  margin-top: 35px;
  padding-bottom: 20px;
  background: #f6f8fa;
}

.click-animations input {
  display: block;
  margin: 20px auto;
  padding: 10px;
  height: 50px;
  width: 50%;
  font-size: 20px;
  outline: none;
  border: 2px solid transparent;
  transition: 0.5s;
}

.click-animations textarea {
  display: block;
  margin: 20px auto;
  padding: 10px;
  width: 50%;
  font-size: 20px;
  outline: none;
  border: 2px solid transparent;
  resize: none;
  transition: 0.5s;
}

.click-animations input:focus,
.click-animations textarea:focus {
  border-color: #30cc8b;
}

.click-animations button {
  display: block;
  margin: 10px auto;
  padding: 10px;
  width: 50%;
  font-size: 20px;
  border: none;
  outline: none;
  background: #30cc8b;
  color: #fff;
  cursor: pointer;
  transition: 0.5s;
}

.click-animations button:active {
  transform: scale(0.95);
}

.form-error {
  border-color: #F46036 !important;
}

animcss.js

$(document).ready(function() {
    $.fn.extend({
        animateCss: function (animationName) {
            var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
            this.addClass('animated ' + animationName).one(animationEnd, function() {
                $(this).removeClass('animated ' + animationName);
            });
            return this;
        }
    });

    $('#testElement').animateCss('fadeInLeft');

//-----------------------------------------

  $("button").on("click", function() {
    
      // verifica se a entrada (id="#name"0 foi preenchida
      if ($("#name").val() === "") {
      $("#name")
        // adiciona classes para produzir a animação
        // "animated" e "shake". A classe "form-error" torna
        // as bordas vermelhas
        .addClass("form-error animated shake")
        // quando a anima/ão terminar (um dos eventos listados),
        // removemos as classes da animação
        .one(
          "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
          function() {
            $(this).removeClass("animated shake");
          }
        );
    } else {
      // se o formulário foi preenchido corretamente,
      // remova a classe "form-error"
      $("#name").removeClass("form-error");
    }

    if ($("#email").val() === "") {
      $("#email")
        .addClass("form-error animated shake")
        .one(
          "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
          function() {
            $(this).removeClass("animated shake");
          }
        );
    } else {
      $("#email").removeClass("form-error");
    }

    if ($("#message").val() === "") {
      $("#message")
        .addClass("form-error animated shake")
        .one(
          "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
          function() {
            $(this).removeClass("animated shake");
          }
        );
    } else {
      $("#message").removeClass("form-error");
    }
  });

//-----------------------------------------

function animationClick(trigger, element, animation){
    element = $(element);
	trigger = $(trigger);
    trigger.click(
        function() {
            element.addClass('animated ' + animation);          
            //wait for animation to finish before removing classes
            window.setTimeout( function(){
                element.removeClass('animated ' + animation);
            }, 2000);           
 
        });
}

function animationHover(trigger, element, animation){
    element = $(element);
    trigger = $(trigger);
    trigger.hover(
        function() {
            element.addClass('animated ' + animation);          
        },
        function(){
            //wait for animation to finish before removing classes
            window.setTimeout( function(){
                element.removeClass('animated ' + animation);
            }, 2000);           
        });
}

});

index.html

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Demo do Animate.css</title>
  
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-theme.min.css">
    <link rel="stylesheet" href="animate.css">
    <link rel="stylesheet" href="animcss.css">
</head>

<body>
    <h1 id="testElement">Elemento animado continuamente</h1>
<div class="click-animations container">
	  <div class="panel panel-primary">
          <div class="panel-heading">Formulário com animate.css</div>
            <div class="panel-body">
              <form>
                <input type="text" placeholder="Name" id="name" />
                <input type="text" placeholder="Email" id="email" />
                <textarea rows="3" 
                        placeholder="Message" id="message"></textarea>
              </form>
              <button>Send</button>
            </div>
        </div>
</div>
    <script src="jquery.min.js"></script>
    <script src="animcss.js"></script>

</body>
</html>

Animate.css

Arquivos para o demo do animate.css: index.html, animcss.css, animcss.js.