Как я могу остановить анимацию CSS3 от перехода к началу, когда закончу

у меня есть анимация CSS3, которая просто перемещает <div> вниз (через top: 0px; to top: 300px;). Но моя проблема в том, что я не знаю, как предотвратить <div> от возвращения к началу, когда анимация будет завершена. Есть ли способ предотвратить это?

вот пример скрипки:http://jsfiddle.net/y8tJ7/

1 ответов


вам нужно инвертировать анимацию так.

@keyframes move {
  from{
    top: 20px;
  }
}

см.http://jsfiddle.net/gleezer/y8tJ7/1/

таким образом, его конечное положение указывается в стиле div, и вы указываете только начальное состояние в ключевом кадре.

редактировать: другой способ достижения этого может быть просто добавить:

animation-fill-mode: forwards.

этот другой скрипка.

дополнительная информация об этом Сеть Mozilla Dev.