Javascript 动画在关键帧更新事件后重复

我制作了一个svg、css动画，并添加了一些jquery键盘事件。 每次我按关键点时，动画就会一次又一次地开始

有没有办法只在加载页面后播放动画

此外，刷卡事件不再起作用（我以前用图像测试过它）

jquery：

$(document).ready(function(){
    $(document).keyup(function(e) {
        if (e.keyCode === 40) {
            $(".arrow_down").animate({
                top:"+=20px",
                opacity:"0"
            });
            $(".button").animate({
                opacity:"1"
            });
        }
          if (e.keyCode === 37) {     
            $(".arrow_down").effect("bounce",{times:3}, 500 );
        }
         if (e.keyCode === 39) {     
            $(".arrow_down").effect("bounce",{times:3}, 500 );
        }
         if (e.keyCode === 38) {     
            $(".arrow_down").effect("bounce",{times:3}, 500 );
        }
    });
    $(".arrow_down").swipe({
        swipeDown:function(){
            $(".arrow_down svg").animate({top:"+=5%", opacity:"0"});
            $(".button").animate({opacity:"1"});
        }
    });
});

小提琴： 好的；我想出来了。 这也许不是最优雅的soloution，但我找不到更好的了

所以我把动画课从“line”改为“animline”。然后在700ms之后，我用类“line”搜索所有项目并删除它们的类“animline”-我不能使用jQuery，因为jQuery不能在没有任何插件的情况下搜索SVG中的元素，所以为什么不使用一些普通JavaScript呢

看小提琴：

JS:

HTML:

---

我可能有更好的解决方案：

将

.line

的默认

stroke dashoffset

设置为

1

，然后将

from

元素设置为

dash

动画，在动画开始时将

stroke dashoffset

设置为

1000

from {
        stroke-dashoffset: 1000;
    }
  to {
    stroke-dashoffset: 0;
  }

现在，如果删除

animation

属性到

.line

，将显示箭头，并且不再触发动画

$(".line").css("-webkit-animation", "none").css("-moz-animation", "none");

---

这对我帮助很大！！非常感谢。不客气。。。您也可以尝试在（'swipe'，function（）{…}）上使用

$（'.''.'）.on来代替
$（'.'.'）.swipe（function（）{…}）。
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="7px" height="193px" viewBox="0 0 7 193" enable-background="new 0 0 7 193" xml:space="preserve"><line class="line animline" fill="none" stroke="#000000" stroke-width="7" stroke-miterlimit="10" x1="3.5" y1="0" x2="3.5" y2="193"/>
</svg>

<svg class="arrow_head" version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="63.25px" height="36.75px" viewBox="0 0 63.25 36.75" enable-background="new 0 0 63.25 36.75" xml:space="preserve"><polyline class="line animline" fill="none" stroke="#000000" stroke-width="7" stroke-miterlimit="10" points="60.5,2.686 31.688,30.509 2.875,2.686 "/></svg>

from {
        stroke-dashoffset: 1000;
    }
  to {
    stroke-dashoffset: 0;
  }

$(".line").css("-webkit-animation", "none").css("-moz-animation", "none");