Динамический CSS: трансформация объектов

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

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

Общие правила трансформации

Логика, реализованная в идее функции трансформации, заключается в искажении элемента. Элементы страницы - это прямоугольная область, даже если она представлена плавной графикой внутри нее.

За счет изменения размеров сторон области или их смещения (перемещения) может быть:

• сформирована динамика;
• образована перспектива;
• выполнен объем.

В любом случае все преобразования происходят на плоскости, но результат возможен как в 2D, так и в 3D-отображении.

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

Верхний ряд картинок - оригинал, нижний ряд - результат применения функций. Для демонстрации основных возможностей использовано следующее описание CSS и показана вставка в HTML-код страницы.

В этом примере трансформация происходит при наведении мышки на элемент и назначается через псевдокласс hover.

В отношении свойства transform при использовании функции translate следует отметить, что CSS-трансформация может быть заменена свойствами left и top. В отношении искажения от функции skew - результат может быть не предсказуем.

Считается, что skew редко используется, но при правильном и комплексном применении CSS-анимации со skew позволит выстроить динамику в трехмерном пространстве при движении элемента. Например, «космический корабль по орбите» в контексте веб-страницы может быть движением товара по витрине в пространстве магазина.

Перспектива при трансформации

Трансформация текста в CSS может дать особый эффект при применении перспективы. В примере показано, как нормальное представление текста может быть преобразовано в псевдотрехмерное.

Возможно, это имеет смысл в некоторых задачах, но практичность обратной идеи очевидна: можно разместить информацию в перспективе, а при наведении на нее мышки трансформировать в нормальное отображение. Это компактно и эффектно.

Эти примеры трансформации описаны в CSS следующим образом:

Применение свойства transform-origin позволяет определить точку, относительно которой будет выполнено преобразование. Перемещая эту точку, можно управлять тем центром, относительно которого выполняется CSS-трансформация.

Функция rotate хоть и имеет два варианта - rotateX и rotateY - но без «X» и «Y» имеет один параметр.

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

Применение свойства animation

CSS анимация посредством animation и @keyframes дополняет возможности трансформации, позволяя превратить ее в реальное представление через управляемое движение элемента или управляемое преобразование его формы.

Верхняя строчка элементов - их нормальное состояние. Первая колонка перемещается, вторая - вращается, а третья - масштабируется. Показано несколько кадров. Для реализации этой функциональности использован следующий код:

Динамику и длительность процесса можно устанавливать в animation и @keyframes. Доступно плавное и ступенчатое изменение процесса. Можно применить равномерное изменение и движение с ускорением.

Возможности свойства animation

Свойство animation обычно записывается одной строчкой. В него входят восемь параметров:

• animation-name - имя анимации;
• animation-duration - длительность анимации (секунды "s", миллисекунды "ms");
• animation-timing-function - тип анимации (ease, linear, ease-out, ease-in, ease-in-out, cubic-bezier);
• animation-iteration-count - число повторений анимации или infinite;
• animation-direction - направление движения (normal, reverse, alternate, alternate-reverse );
• animation-play-state - остановка анимации (running, paused);
• animation-delay - задержка анимации перед началом воспроизведения (секунды "s", миллисекунды "ms");
• animation-fill-mode - проигрывать анимацию вне указанного времени воспроизведения (
• none, forwards, backwards, both);

При разработке анимации посредством animation свойства трансформации указываются в правиле @keyframes, которое определяет последовательность преобразования элемента по шагам.

Важные параметры анимации

Любая анимация имеет имя, длительность и тип. По имени определяется нужное описание @keyframes, длительность определяет время процесса, а тип - вариант движения.

При необходимости равномерного процесса (движение и/или преобразование) используется значение linear. Если нужно иметь ускорение в начале - ease-out, если в конце - ease-in. Просто ease - это скольжение, а ease-in-out - его более плавный вариант.

Значение cubic-bezier позволяет сформулировать сложный вариант движения и построить более оригинальный вариант анимации.

На сайте производителя можно выбрать любой стандартный вариант движения и спроектировать свой. При нажатии на кнопку «GO!» два квадратика будут двигаться параллельно и можно сопоставить отличия и визуально сформировать нужное поведение элемента.

Построение фреймов анимации

Свойство @keyframes является «определителем» кадров (см. пример выше), через которые проходит трансформация элемента. Идея свойства очень проста, но возможности она предоставляет колоссальные.

Процесс начинается с 0 % и заканчивается на 100 % от общего времени, выделенного на анимацию. Можно использовать только конечные точки from и to, либо 0 % и 100 %. Большего эффекта можно добиться, разделив весь процесс анимации/трансформации на участки. Шаг участка может быть любым.

Обычно принимается несколько вариантов: 0 %, 25 %, 50 %, 75 % и 100 %. Иногда достаточно только три кадра: 0 %, 50 % и 100 %. Как поступить в каждом конкретном случае, зависит от задачи и разработчика.

При построении любого варианта трансформации следует соблюдать одно существенное правило. Не всегда допустимо использование JavaScript, особенно это касается программируемого изменения свойств элементов, например смена значения свойства background-image.

HTML, CSS и JavaScript прекрасно сочетаются, но во всех случаях нужно учитывать фактическую функциональность каждой этой составляющей. Идеально, когда они работают в четком сочетании и не мешают друг другу.