使用jQuery，如何多次运行此动画？
这是我的完整代码。当我在演示站点（如下所列）上查看此示例时，它可以工作，但当我在我的站点上使用它时，它只会制作一次动画，单击DIV不会再次运行动画。我看到它的不透明度改变，但它没有重新设置动画。我做错什么了吗使用jQuery，如何多次运行此动画？,jquery,animation,Jquery,Animation,这是我的完整代码。当我在演示站点（如下所列）上查看此示例时，它可以工作，但当我在我的站点上使用它时，它只会制作一次动画，单击DIV不会再次运行动画。我看到它的不透明度改变，但它没有重新设置动画。我做错什么了吗 <!DOCTYPE HTML> <html> <head> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <s
<!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>
window.jQuery | | document.write（“”）
@为我的动画设置关键帧{
从{
不透明度：0；
左：-500px；
}
到{
不透明度：1；
左：0；
}
}
.运行动画{
位置：相对位置；
动画：我的动画2轻松；
}
#标志{
文本对齐：居中；
字体系列：Palatino Linotype、Book Antiqua、Palatino、衬线；
}
$（文件）。准备好了吗(
函数（）{
//检索元素
变量元素=$（“#徽标”）；
//通过…重置转换。。。
元素。单击（函数（）{
element.removeClass（“运行动画”）
css（“不透明度”和“.5”）；
addClass（“运行动画”）；
});
}
);
花式文字
正如Chris Coyier在开头提到的，您需要添加相应的供应商前缀。如果您在chrome上查看，您将能够在以下小提琴中看到动画，其中我使用了
-webkit-