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

Question

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

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

Answer 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, но он надежный и гибкий, имхо.

Answer 2

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

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

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

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

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

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

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

Answer 3

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

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