итерация обратной -webkit-анимации для скрытия элемента

Question

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

@-webkit-keyframes slide {
  from  {  opacity: 0;  -webkit-transform: translateY(500px); }
  to    {  opacity: 1;  -webkit-transform: translateY(0);     }
}

.module {
    -webkit-animation: slide .4s 0 1 normal ease none;
}

Я думал, возможно ли, что когда я назначаю class='done' для этого div он может взять ту же анимацию и воспроизвести ее, имитируя тот же эффект, скрывая div.как:

.module.done {
    -webkit-animation: slide .4s 0 1 alternate ease none;
}

, но кажется, что он всегда начинается с 1 итерации во втором случае, я хотел бы обратить анимацию, чтобы она могла начинаться с исходной позиции, а затем скользить вверх 500px

Можно ли добиться с помощью той же анимации или мне нужно создать новую с инвертированными значениями?

Спасибо

Answer 1

Этот конкретный вариант использования лучше всего работает с переходами CSS, плюс вы получаете бесплатную поддержку Opera и FF 3.5+. Это основной синтаксис:

#notice {
  -vendor-transition: -webkit-transform 2s ease;
}

#notice.pop {
  -vendor-transform: translateY(50px);
}

Когда вы добавляете или удаляете .pop, анимация автоматически выполняется для вас.

Проверьте рабочий пример: http://jsfiddle.net/qLKzX/

Answer 2

Я полагаю, что вы можете сделать это, установив задержку анимации на соответствующее отрицательное значение (чтобы оно начиналось при первом обращении).