ボタンのクリックでAnimate.cssのフリップテキストがうまく機能しない

ボタンをクリックしてテキストを反転しようとしています。私はボタンクリックでh1タグにアニメーション「flipInY」が必要です。
アニメーションが起こったが、デモあたりとしては、リンクの下で提供されていない：私もここにcodepen作成したボタンのクリックでAnimate.cssのフリップテキストがうまく機能しない

<html> 
<head> 
    <title></title> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css"> 
</head> 
<body> 
    <div> 
     My Name is <h1 id="txt">It Works!</h1> Hardik 
    </div> 
    <button type="button" id="btn">Animate</button> 
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script> 
    <script> 
     $.fn.extend({ 
      animateCss: function (animationName) { 
       var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; 
       $(this).addClass('animated ' + animationName).one(animationEnd, function() { 
        $(this).removeClass('animated ' + animationName); 
       }); 
      } 
     }); 
     $("#btn").click(function() { 
      $('#txt').animateCss('flipInY'); 
     }); 
    </script> 
</body> 
</html>

：
http://codepen.io/anon/pen/bwGdvO

https://daneden.github.io/animate.css/

が、私は以下のコードで同じアニメーションをしたいです

出典

2016-09-01 Ubiquitous Developers