Ubiquitous Developers Ubiquitous Developers - 1 month ago 4x
CSS Question

Animate.css fliptext on button click not working well

I am trying to flip text on button click. I want animation 'flipInY' on h1 tag on button click.

Animation is happening but not as per demo give in below link:


I want same animation in below code:

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

I've also created codepen here:



I believe what you're trying to achieve has a simple fix.

At the moment, the animation is applying to the header container, which spans the full width of the page.

This can be resolved by wrapping the text inside the header with a div/span using display:inline-block; and applying the animation to that instead.

See fixed CodePen: http://codepen.io/anon/pen/rrNOjW