Animate.css摇晃不起作用

Question

所以我正在使用Animate.css库，如果您不知道我在说什么https://github.com/daneden/animate.css，这里是链接

所以我要这样： <h1><a id="Header" class="Header">My First Heading</a></h1>当我单击它时变成这样： <h1><a id="Header" class="Header animated shake">My First Heading</a></h1>

现在对我来说，它可以在chrome和firefox中使用，但是动画没有发生。 换句话说，我改变了它，但是颤抖没有发生。

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);
     });
 });

}）;

我是jsfiddle的新手，因此可能无法正确设置。 这是我的jsfiddle演示https://jsfiddle.net/Demonwing103/7sc7zagq/21/

所以最终我不知道为什么即使更改为此也不会摇动： <h1><a id="Header" class="Header animated shake">My First Heading</a></h1>

Answer 1

很难说，因为您正在使用未包含在提琴中的第三方库。 不过，您应该更改类和ID名称，以小写字母开头，这是更好的做法。 这应该可以工作（使用小写的类）：

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

Answer 2

因此，您的演示中有两件事是错误的：

一，你的链接到animate.min.css似乎链接在这里都到404。我相信你刚才输入animate.min.css ，但实际上你需要硬链接到一个实际的文件，即这一个 。 您可以通过将链接直接复制并粘贴到jsFiddle中的输入中来实现。

其次，您仍然会看到动画不起作用。 这是因为在后台， shake使用了 仅适用于块级元素的 transform CSS属性 。 您试图将其应用于内联元素<h1>因此您只需要将其设置为display: block 。

这是jsFiddle的分叉工作演示 。 仅供参考，如果不需要，我不想更改您现有的代码，但是由于设置了高延迟，因此您必须稍等片刻才能看到动画。

也是堆栈片段

 $(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>