Я использую CSS-шейдер + анимация. Мой класс шейдеров определяется следующим образом:
.shader{
-webkit-filter :custom(url(v.vs) mix(url(f.fs) multiply destination-over), 200 200);
-webkit-animation-name: test;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1
}
Я пытаюсь установить/сбросить стили (шейдер + анимация) динамически с помощью jquery через $('#holder').addClass('shader');
и $('#holder').removeClass('shader');
Однако странная вещь заключается в том, что когда я сбрасываю класс (например, вызываю addClass после removeClass), только шейдер повторно применяется, а анимация - нет (я подключил событие AnimationStart, чтобы увидеть, когда моя анимация запускается). Кто-нибудь знает, почему это так и как я могу это решить?
Изменение: я добавил упрощенную версию фрагмента JSfiddle здесь. По сути, я повторно применяю анимацию к div дважды, но фактическая анимация вызывается только в первый раз.