Animate.css shake not working

Question

So I am using the Animate.css library here is the link if you dont know what iam talking about https://github.com/daneden/animate.css

so I want this: <h1><a id="Header" class="Header">My First Heading</a></h1> to become this when I click it: <h1><a id="Header" class="Header animated shake">My First Heading</a></h1>

Now it is working in chrome and firefox for me but the animation is not happening. in other words I got it to change but the shaking is not happening.

HTML:

<body>
<h1><a id="Header" class="Header">My First Heading</a></h1> 
<p>My first paragraph.</p>
</div>
</body>

CSS

   #Header{
  -webkit-animation-duration: 3s;
  -webkit-animation-delay: 2s;
  -moz-animation-duration: 3s;
  -moz-animation-delay: 2s;
  -o-animation-duration: 3s;
  -o-animation-delay: 2s;
  animation-duration: 3s ;
  animation-delay: 2s;
  }

JQuery

$(function(){
 var animationName = 'animated shake';
 var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

 $('h1').on('click',function(){
     $('#Header').addClass(animationName).one(animationEnd,function(){
         $(this).removeClass(animationName);
     });
 });

});

I am new to jsfiddle so things might not be set up right. here is my jsfiddle demo https://jsfiddle.net/Demonwing103/7sc7zagq/21/

so ultimately I don't know why its not shaking even though its changing to this: <h1><a id="Header" class="Header animated shake">My First Heading</a></h1>

aug · Accepted Answer · 2017-10-11T00:29:17.163

So there are two things that are wrong in your demo:

One, your link to animate.min.css seems to link here which goes to a 404. I believe you just typed in animate.min.css but you need to actually hard link it to an actual file i.e. this one. You can do this by copying and pasting the link straight into the input in jsFiddle.

Second, you'll still see the animation doesn't work. This is because behind the scenes, shake uses transform CSS properties which are only applicable to block level elements. You are trying to apply it to an inline element, <h1> so you simply need to set it to be display: block.

Here is a forked working demo of your jsFiddle. Just FYI I didn't want to change your existing code if I didn't need to but you'll have to wait a bit before you see the animation since you have a high delay set.

Also stack snippet

$(function(){
  var animationName = 'animated shake';
  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  
  $('h1').on('click',function(){
   $('#Header').addClass(animationName).one(animationEnd,function(){
    $(this).removeClass(animationName);
   });
  });
 });

body{
 background-color: rgb(171, 194, 232);
}
#Header{
    display: block;
   -webkit-animation-duration: 10s;
  -webkit-animation-delay: 2s;
    -moz-animation-duration: 3s;
   -moz-animation-delay: 2s;
    -o-animation-duration: 3s;
   -o-animation-delay: 2s;
    animation-duration: 3s ;
  animation-delay: 2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit.com/daneden/animate.css/master/animate.min.css" rel="stylesheet"/>
<body>
<h1><a id="Header" class="Header">My First Heading</a></h1>
<p>My first paragraph.</p>

<div id="animeContent">
</div>

</body>

score 0 · Answer 2 · answered Oct 10 '17 at 23:35

It's tough to say, as you're using a third party library that isn't included in your fiddle. You should change your class and id names to begin with lower case letters though, it's better practice. This should work (lower case classes used):

$('.header').click(function(){
     $(this).addClass('animated').addClass('shake');
 });

Animate.css shake not working

2 Answers2