Question

您能告诉我如何停止关键帧动画吗？在下面的示例中，div元素循环回到顶部并再次向下移动。我可以在div to{}条件后停止运作吗？

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

Answer 1

您可以将animation-fill-mode属性与forwards一起用作值。

来自MDN：

<强> forwards
目标将保留由执行期间遇到的最后一个关键帧设置的计算值。最后一个关键帧遇到的取决于animation-direction和{的值 animation-iteration-count。

你走了：

div {
    -webkit-animation: mymove 5s forwards; /* Safari and Chrome */
    /* Add other vendor-prefixes if needed */
    animation: mymove 5s forwards;
}

<强> WORKING DEMO

Answer 2

动画计数中的“无限”是问题所在。它实际上意味着“无限”。删除它，并添加填充模式：转发，你就完成了。

Answer 3

简单。

你需要玩javascript。直接用css！是不可能的。

我在jsFiddle上放了一个例子

http://jsfiddle.net/s4rmw/

代码：

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

这个div有一个动画。什么时候悬停！动画停止

我的意思是你的意思！

问候！

如何停止关键帧动画

3 个答案: