使用jQuery，我怎样才能多次运行这个动画？

-1

这是我的完整代码。当我在演示网站（下面列出）上查看此示例时，它可以正常工作，但是当我在我的网站上使用它时，它只会动画一次，并且单击DIV时不会再次运行动画。我看到它的不透明度变化，但它不会重新生成动画。难道我做错了什么？使用jQuery，我怎样才能多次运行这个动画？

<!DOCTYPE HTML> 

<html> 

    <head> 

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script type="text/javascript">window.jQuery || document.write('<script type="text\/javascript" src="jquery-2.1.1.js"><\/script>')</script> 

    <style> 

     @keyframes my-animation {   
     from { 
      opacity : 0; 
      left : -500px; 
     } 
     to { 
      opacity : 1; 
      left : 0; 
     }  
     } 

     .run-animation { 
     position: relative; 
     animation: my-animation 2s ease; 
     } 

     #logo { 
     text-align: center; 
     font-family : Palatino Linotype, Book Antiqua, Palatino, serif; 
     } 

    </style> 

    <script> 

    <!--- jQquery check to see if the document is ready ---> 
    <!--- --------------------------------------------- ---> 
     $(document).ready(

     function(){ 

      // retrieve the element 
      var element = $("#logo"); 

      // reset the transition by... 
      element.click(function() { 
       element.removeClass("run-animation") 
       element.css("opacity", ".5"); 
       element.addClass("run-animation"); 
      }); 
     } 
    ); 

    </script> 
    </head> 

    <body> 
    <h1 id="logo" class="run-animation"> 
     Fancy Text 
    </h1> 
    </body> 

</html>

这是我得到了它从网站： http://css-tricks.com/restart-css-animation/

来源

2014-11-20 user2721815

您需要添加相应的供应商前缀克里斯Coyier已经在开始时提到的权利。如果您使用的是Chrome浏览它，你将能够看到动画在下面的小提琴在那里我已经为供应商前缀

FIDDLE

来源

2014-11-20 20:34:35 Anubhav

我本来使用，我忘了包括。我把它放回来，所以前缀不应该是必要的。但我看着你的小提琴页面，我也没有看到它在那里工作。把前缀仍然不会使它适用于我。 – user2721815 2014-11-20 20:53:39

使用jQuery，我怎样才能多次运行这个动画？

回答

相关问题