html - 如何停止我的动画

Question

我希望 block 从一个点移动到另一个点。 在 fiddle 中，您可以看到动画结束后， block 返回到其第一个位置。

如何防止这种情况发生？

http://jsfiddle.net/2nT2S/

CSS

div
{
width:100px;
height:100px;
background:black;
position:relative;
animation:myfirst 2s;
-webkit-animation:myfirst 2s; /* Safari and Chrome */
}

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

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

Answer 1

只需添加转发 animation-fill-mode到动画:

animation:myfirst 2s forwards;
-webkit-animation:myfirst 2s forwards; /* Safari and Chrome */

jsfiddle