Css 如何停止关键帧动画

您能告诉我如何停止关键帧动画吗？在下面的示例中，div元素循环返回到顶部，然后再次向下移动。在div变为{}状态后，我可以停止函数吗

<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}

@keyframes mymove
{
    from {top:0px;}
    to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
    from {top:0px;}
    to {top:200px;}
}
</style>

<div></div>

您可以将属性与forwards一起用作值

从：

转发 目标将保留由执行期间遇到的最后一个关键帧设置的计算值。最后一个关键帧 遇到的问题取决于动画方向和方向的值 动画迭代计数

给你：

div{ -webkit动画：mymove 5s forwards；/*Safari和Chrome*/ /*如果需要，添加其他供应商前缀*/ 动画：mymove 5s向前移动； }

---

.

动画数量的无限性是问题所在。它实际上意味着无限。删除它，然后添加填充模式：forwards，就完成了

简单

您需要使用javascript。直接使用css！这是不可能的

我在jsFiddle上举了一个例子

守则：

<div class="animation"><h2>¡HOVER ME!</h2></div>

这个部门有一个动画。当悬停！动画停止

这就是我所说的你的问题

---

问候

嗨，哈希姆，谢谢你的回复，但这对我不起作用！你能看一下这个例子吗：要看它不起作用，你可以从这个例子中看到，在css规则的末尾，方框的透明度又回到了.5。@Behseini抱歉，在我添加更多细节的时候，停电了。当你使用速记语法时，你应该在动画属性中使用forwards关键字。嗨，Michael，谢谢你的回复，你能看看这个例子吗？这个提琴在firefox、chrome和safari中对我有效。虽然您还应该有一个-webkit动画填充模式：forwards以获得完整性。您使用的是IE 9还是更低版本？如果是，则不支持动画。