I want to implement a flip animation on text when a button is clicked. I am using the 'flipInY' animation from animate.css library, but it's not working as expected. The desired animation can be seen in the example provided in this link:
Here is the code snippet where I want to apply the same animation:
<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>
I have also shared a CodePen demo of the implementation here:
http://codepen.io/anon/pen/bwGdvO