Question

这是我的完整代码。当我在演示网站（下面列出）上查看此示例时，它可以工作，但是当我在我的网站上使用它时，它只会动画一次并且点击DIV不会再次运行动画。我看到它的不透明度变化，但它没有重新制作动画。我做错了吗？

<!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/

Answer 1

您需要添加各自的供应商前缀，正如Chris Coyier在开头提到的那样。如果您在chrome上查看它，您将能够在以下小提琴中看到动画，其中我使用-webkit-作为供应商前缀

<强> FIDDLE

使用jQuery，我怎么能不止一次运行这个动画？

1 个答案: