Как остановить мою анимацию

Question

Я хочу, чтобы блок переходил от одной точки к другой. В Fiddle вы можете видеть, что после анимации блок возвращается к первой позиции.

Как я могу предотвратить это?

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

Просто добавьте forwardsanimation-fill-mode к анимации:

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

jsfiddle

Answer 2

Я новичок т о анимации, но я думаю, что это может быть достигнуто путем добавления top:200px; в DIV

вот пример: http://jsfiddle.net/fatgamer85/2nT2S/2/