Ubiquitous Developers Ubiquitous Developers - 1 year ago 89
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:


Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download