Помощь Joomla



Запустить Анимацию Css с Помощью Javascript

Разработка → Шлифуем CSS-анимацию перевод  Октябрь 22, 2017 – 15:06
imgСоздание CSS-анимации может выглядеть как простое изучение синтаксиса, но для создания красивой и интуитивной анимации нужны определенные тонкости. Так как анимация привлекает достаточно много внимания, крайне важно привести код в порядок, чтобы хронометраж действовал правильно, и отладить все, что работает неправильно. После того, как я сама разобралась с этой проблемой, я решила собрать несколько инструментов, которые могут помочь в этом процессе.

Использование значений отрицательной задержки

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

Эту концепцию можно использовать и для отладки. Установите animation-play-state: paused;, после чего задайте различные отрицательные значения задержки. По мере перехода вы увидите кадры анимации в различных состояниях паузы.

В этом забавном демо мы видим двух роботов, зависающих с различным промежутком времени, чтобы это выглядело более натурально. При описании анимации зависания зададим фиолетовому роботу отрицательную задержку, чтобы, когда пользователь впервые увидит страницу, он уже двигался.

Проблемы значений множественных трансформаций

Для большей эффективности некоторые элементы стоит также двигать и изменять с помощью функции transform, которая поможет вам избежать затрат на перерисовку с полем или сдвигом влево/вправо и т.п. У Пола Льюиса есть отличный ресурс под названием CSS Triggers, в котором такие затраты представлены в виде удобной таблицы. Подводные камни здесь заключаются в том, что если вы попробуете сдвинуть элементы с помощью множественных трансформаций, вы столкнетесь с рядом проблем.

Главная проблема – порядок. Трансформации не будут применяться одновременно, как можно было бы ожидать, и вместо этого они будут появляться в порядке операций. Первой операцией будет крайняя справа, и далее по порядку. Например, в коде, приведенном ниже, сначала будет запускаться масштабирование, потом преобразование, и потом вращение.

@keyframes foo { to { /* 3rd 2nd 1st */ transform: rotate(90deg) translateX(30px) scale(1.5); } }

В большинстве ситуаций это не идеальный вариант. Скорее всего, вам нужно, чтобы все это происходило параллельно. Более того, это становится еще сложнее, если вы начинаете разделять трансформации на несколько ключевых кадров, в которых некоторые значения используются одновременно, а некоторые – нет. Например, таким образом:

@keyframes foo { 30% { transform: rotateY(360deg); } 65% { transform: translateY(-30px) rotateY(-360deg) scale(1.5); } 90% { transform: translateY(10px) scale(0.75); } }

Source: habrahabr.ru

Похожие публикации:

  1. Таблицу Помощью Javascript
  2. Css Изменения с Помощью Javascript
  3. Добавить Атрибут в Тег с Помощью Javascript
  4. Как Изменить Css с Помощью Javascript