Плавная анимация перемещения с помощью CSS

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

Перемещение может быть сумасшедшим, как это:

Your browser does not support inline frames or is currently configured not to display inline frames.

Перемещение может быть и не таким явным. К примеру, таким, которое возникает при наведении курсора мыши на один из квадратов на рисунке ниже:

Your browser does not support inline frames or is currently configured not to display inline frames.

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

Преобразование при помощи translate3d()

При перемещении элемента изменяется его вертикальная и горизонтальная позиции. Существуют пару свойств CSS, которые применяются для этого. Но я хочу порекомендовать вам использовать возможность translate3d свойства transform вместо привычных margin, padding, left, top, так как она обеспечивает более плавную анимацию.

Функцию translate3d принимает три аргумента, но сначала рассмотрим те, которые отвечают за перемещение содержимого по горизонтали и вертикали:

Плавная анимация перемещения при помощи CSS Аргумент Х задает перемещение по горизонтали, Y — по вертикали. К примеру, если вы хотели бы переместить содержимое на 20 пикселей вправо и вверх, функцию translate3d должна выглядеть следующим образом:

.foo { transform: translate3d(20px, 20px, 0px);}

Третий аргумент, который определяет перемещение по оси Z, мы рассматривать не будем. Поскольку нас интересует 2d-hover эффекты CSS.

Как видите, функцию translate3d не особенно сложная. Далее мы рассмотрим, как использовать ее в анимации CSS для создания движения.

Переход

Чтобы использовать это свойство в переходе, необходимо выполнить два этапа. Сначала надо указать transform в виде свойства, которое должно отслеживать переход:

.pictureContainer img { position: relative; top: 0px; transition: transform.2s ease-in-out;}

Определив переход, вы можете без проблем задать свойство transform с функцией translate3d:

.pictureContainer img:hover { transform: translate3d(0px, -150px, 0px);}

Как показано в примере, приведенном в начале статьи, CSS hover эффект при наведении курсора мыши на любой из элементов приводит к смещению картинки вверх на 150 пикселей.

Анимация

В случае анимации, убедитесь, что ключевые кадры в @keyframes содержат свойство transform с translate3d:

@keyframes bobble { 0% { transform: translate3d(50px, 40px, 0px);      animation-timing-function: ease-in;    }    50% {        transform: translate3d(50px, 50px, 0px);        animation-timing-function: ease-out;    }    100% {        transform: translate3d(50px, 40px, 0px);    }}

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

Не забывайте о префиксах

Чтобы разметка работала в разных браузерах, обязательно используйте для свойства transform вендорные префиксы или библиотеку — prefix-free.

Переходы при помощи JavaScript

Также можно создавать анимацию перемещения в JavaScript. Те же правила действуют и здесь. Сначала необходимо установить позицию, используя transform translate3d, но в JavaScript это сложнее.

Фрагмент кода, который нужен для этого, выглядит следующим образом:

function getSupportedPropertyName(properties) {    for(var i = 0; i < properties.length; i++) {        if(typeof document.body.style[properties[i]]!= "undefined") {            return properties[i];        }    }    return null;}    var transform = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"];  var item = document.querySelector("#theItem");var transformProperty = getSupportedPropertyName(transform);  if(transformProperty) {    item.style[transformProperty] = translate3d(someValueX, someValueY, 0px);}

Этот программный код кажется сложным потому, что мы используем префиксы и проверяем соответствие используемой версии возможности transform.

Почему нам не подходит установка позиции при помощи margin, top, left и т.д.?

Если у вас нет на то особой причины, не используйте для создания hover эффектов CSS свойства margin, padding, top, left, bottom или right. Хотя это может показаться противоречащим здравому смыслу. Позвольте мне пояснить…

Ненужные вычисления

Когда вы изменяете набор значений для шести свойств CSS, которые я только что перечислил, браузер выполняет дополнительные вычисления того, как это отобразится на макете всей страницы. Я не против того, чтобы использовать данные свойства для работы с макетом. Но их применение в анимации или переходах, и изменение значений шестьдесят раз в секунду – это чересчур.

Вы можете задать для position элемента, который вы перемещаете, значение fixed или absolute. Это избавит браузер от необходимости вычислять макет для всего документа. Но в этом случае браузер все равно выполняет вычисления для элемента, который перемещается. И результат применения translate3d не обязательно будет идентичен результату, получаемому при использовании margin, padding и т.д. Более того, как вы увидите в следующем разделе, они не будут на 100% идентичны.

Аппаратное ускорение

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

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

А как обеспечить, чтобы анимация в режиме аппаратного ускорения использовала GPU ? Применить translate3d ! При преобразовании элемента при помощи translate3d он обрабатывается через GPU в Webkit-браузерах , таких как Chrome и Safari (которые установлены на iPhone и iPad ), в Internet Explorer 9/10 , а также в последних версиях Firefox . Это дает translate3d явные преимущества.

Как насчет JavaScript?

Что касается hover эффектов CSS , созданных на JavaScript , где все интерполяции обрабатывается кодом, я фактически не знаю, будет ли использование GPU таким продуктивным. Но для установки при помощи JavaScript переходов и анимации CSS со свойством translate3d используется GPU .

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

Боже, благослови преобразования!

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

Так что при использовании translate3d вы приобретаете преимущества локальной перестройки экрана. Но кроме этого, вы приобретаете дополнительные преимущества, поскольку вся работа выполняется GPU .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *