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

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

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

jsfiddle