CSS3 Цепная анимация

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

Мой вопрос в том, что лучший способ "цепочки" этих анимаций. Должна ли я иметь одну анимацию для перемещения по экрану, отдельную анимацию для выделения текста и третьей анимации для перемещения по остальной части экрана? Затем, следует ли установить задержку анимации только для запуска второй и третьей анимации после завершения предыдущих анимаций? Я думаю, что я в порядке с созданием отдельных анимаций, которые будут соединены вместе, но я не уверен, как эти анимации должны запускать следующую анимацию.

Ответ 1

Существует несколько способов связать анимацию - там чистый способ CSS, используя -webkit-animation-delay, где вы определяете несколько анимаций и указываете браузеру, когда их запускать, например.

-webkit-animation: First 1s, Second 2s;
-webkit-animation-delay: 0s, 1s;
/* or -moz etc.. instead of -webkit */

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

$('#id')
  .bind('webkitAnimationEnd',function(){ Animate2() })
  .css('-webkit-animation','First 1s');

Третий способ - установить тайм-ауты в Javascript и изменить свойство анимации css. Это то, что я использую большую часть времени, поскольку оно является самым гибким: вы можете легко изменить время, отменить последовательности анимации, добавить новые и разные, и у меня никогда не было проблемы с отказом, как у меня есть привязка к transitionEnd событие.

$('#id').css('-webkit-animation','First 1s');
window.setTimeout('Animate2("id")', 1000);
function Animate2....

Это больше кода, чем привязка, и больше, чем CSS, конечно, но он является сменным и более гибким, imho.

Ответ 2

Пока я искал одно и то же, без использования чего-то вроде jQuery, я придумал ту же идею о цепочке, слушая webKitanimationEnd, как это было предложено другими. Таким образом, вы можете использовать CSS для переходов и для времени анимации.

Вы можете создать массив как очередь и добавить элемент, который вы хотите оживить (с некоторыми параметрами типа эффекта и типа анимации). Затем вы можете обработать эту очередь, перейдя к следующей анимации, когда анимация закончится. Эта анимация может быть либо другим элементом, либо последующей анимацией для одного и того же элемента. Не забудьте удалить класс анимации из className, когда закончится анимация. Для каждого шага просто добавьте соответствующие классы CSS, а затем удалите их, когда анимация закончена. Поскольку мы слушаем animationEnd, время может быть сделано только с помощью CSS, оставив только обработку JavaScript.

Это такая минимальная задача, что если ваш проект еще не использует библиотеку jQuery, вам следует просто использовать Vanilla JS.

Я провел некоторое исследование и смог собрать что-то вместе. См. эту скрипту для примера:

var manager = new AnimationManager();
manager.enqueue(animations).animate();

Конечный продукт находится на моем github repo.

Надеюсь, это даст вам некоторое понимание/помощь.

Ответ 3

Просто построил цепочку анимаций в Chrome 16 с использованием "правильного" и наиболее общего способа: запуск второй анимации на webkitAnimationEnd с анимациями, определенными ключевыми кадрами, на которые ссылается правило класса, определяющее переменные анимации - *, и запускается путем добавления имени класса к целевым элементам. Это "правильно", потому что он определяет все временные интервалы относительно один раз, потому что он наиболее гибкий (например, каждая анимация может включать в себя отдельные элементы, которые вы не можете сделать в рамках одного ключевого кадра) и потому, что она максимизирует использование CSS3.

Не удалось. Исправлено, удалив имя класса завершенного перехода, прежде чем запускать следующий!