Пятница , 4 Декабрь 2020
ДомойПубликацииЭффекты в CSS3: свойство transition

Эффекты в CSS3: свойство transition

Друзья, здравствуйте.

Многие из вас любят всякие красивости. В старых версиях CSS эффекты отсутствовали как данность. Можно было использовать псевдо-свойство :hover, чтобы задать элементу новые «габариты» при наведении мыша, но все действия осуществлялись мгновенно: наводишь мыша на элемент, а он сразу становится в 2 раза больше (для примера). Для плавности приходилось использовать JavaScript.

С приходом CSS3 всё изменилось. Элементы теперь можно транформировать (к примеру, вращать), делать прозрачными, заставлять отбрасывать тень и многое другое. Но главное, появилась возможноть переложить на браузер анимацию по изменению какого-либо параметра (или сразу всех). Достигается это великолепие благодаря одному свойству — transition, которое и будем скальпировать.

transition в CSS3

Свойство применяется к элементу и имеет следующий вид:

transition: [свойство] [время анимации] [тип анимации] [задержка]

Если требуется изменить несколько свойств, просто перечисляем каждое через запятую.

transition: [свойство1] [время анимации] [тип анимации] [задержка],
[свойство2] [время анимации] [тип анимации] [задержка],

Чтобы стало чуть понятнее, более полный листинг:

div {
    background-color:#f00;
    width: 150px;
}
div:hover {
    transition: width 1s linear 0s;
    width: 250px;
}

Изначально элемент div имеет ширину 150px. При наведении мыша ширина элемента в течение 1 секунды увеличивается до 250px.

Теперь разберём в деталях каждый из параметров.

Свойство

Это обычное CSS свойство, например, width, height, background-color и т. п., для которого осуществляется переход.

Если указать ключевое слово all, то изменение будет произведено для всех свойств.

Время анимации

Целое или дробное значение секунд или миллисекунд (s или ms), задающее продолжительность анимации.

Задержка

Задаёт отсрочку (время начала) анимации. Может принимать значения, аналогичным из предыдущего пункта — s или ms.

Тип анимации

Под этим невзрачным пунктом всё и скрывается. Разберём, для начала, предопределённые свойства.

Шаговые эффекты

Определены следующие значения:

  • steps — заданное число шагов. Общий вид:
    steps([число], [значение])
    [число] — сколько раз изменятся свойства. Например, если начальная ширина имеет значение 50px, а конечная — 150px, то при 2 шагах, на каждом шаге к начальному значению будет добавлять по 50px: шаг № 1 — 100px, шаг № 2 — 200px.
    [значение] — одно из ключевых слов — start или end. Принципиальное отличие заключается во времени приращения. Допустим, время равняется двум секундам. Для start приращение применяется в начале каждого тика, для end — в конце. Если непонятно, поэкспериментируйте с формой ниже.
  • step-start — анимация отсутствует, свойство немедленно принимает конечное значение (аналогично простому :hover без данного свойства). Соответствует steps(1, start).
  • step-end — анимация отсутствует, свойство принимает конечное значение при окончании заданного времени анимации. Соответствует steps(1, end).

Собственная функция

Примечательно, что она всего одна — cubic-bezier. Однако за такой простотой и скрывается вся мощь. Вызов функции имеет вид:

cubic-bezier(x1, y1, x2, y2)

За основу движения берётся кубическая кривая Безье. Вообще, для построения этой линии нужно 8 точек. Но 4 у нас есть: 2 начальное положение, условно обозначаемое [0,0], 2 конечное — [1,1]. Остальные точки являются промежуточными. x1 и x2 — время, в интервале от нуля до единицы, где одному соответствует время анимации (то значение, которое задали). А вот y1 и y2 могут принимать любые величины, при этом 0 — исходное значение свойста, 1 — окончательное.

Углубляться в принцип построения нет смысла — кому интересно, могут почитать статью на Вики.

Предопределённые эффекты

Удивительно, но указанные значения являются вариациями на основе cubic-bezier.

  • linear — равномерная скорость. В точности соответствует cubic-bezier(0, 0, 1, 1). Например, если начальная ширина элемента равна 20px, а конечная — 30px, время анимации задано как 1 секунда, то такждые 100 миллисекунд ширина элемента будет изменяться на 1 пиксель.
  • ease — медленное начало анимации с последующим ускорением и повторным замедлением в конце. Соответствует cubic-bezier(0.25, 0.1, 0.25, 1).
    ease-in — медленное начало анимации с ускорением в конце. Соответствует cubic-bezier(0.42, 0, 1, 1).
    ease-out — быстрое начало анимации с замедлением в конце. Соответствует cubic-bezier(0, 0, 0.58, 1).
    ease-in-out — медленное начало и окончание с быстрой «серединой». Соответствует cubic-bezier(0.42,0,0.58,1).

cubic-bezier в разрезе

И вот мы начитались теории. Однако лучше один раз увидеть, чем сто раз представить, как всё работает.

Форма ниже позволит наглядно представить, как выглядит конечный эффект. По горизонтали отмечается время, по вертикали — степень изменения свойства. Значения 0 соответствуют началу, 1 — концу (финальной установке).

По вертикали значениям y разрешается выходить за границы «единичного квадрата». А это значит, что свойство может изменяться сверх заданных границ, и даже в какой-то момент времени возвращаться вплоть до исходного состояния и даже дальше.

Дополнительно задать время анимации и эффект, просмотреть, что получится, можно с помощью кнопки «Применить эффект». На примере «раскачки» хорошо видно, как размеры блока во время анимации выходят за предопределённые границы (меньше начального и больше конечного значений).

Цветом циан (морской волны) отмечена первая точка из доступных (x1,y1), жёлтым — вторая точка (x1,y1). Числа в блоках рядом — соответствующие значения. В общем, экспериментируйте.

Элемент не поддерживается

Время
Продвижение
0,0
1,1

Время:

Предопределённый эффект:

Свои эффекты:



Всё это должно работать в браузерах Firefox, Chrome, новых Opera и Internet Explorer 10+.

Если есть вопросы — велкам в комментарии.

Рейтинг: 0

Автор публикации

2 070
не в сети 3 недели

x64 (aka andi)

Комментарии: 2893Публикации: 405Регистрация: 02-04-2009
Так себеНеплохоХорошоЗамечательноСупер! (1 голосов, в среднем: 5,00 из 5)
Загрузка...

13 комментариев

  1. Вооот. И я говорю, что это надо использовать.
    Если например переключать чисто классу элемента по состоянию получится отличная альтернатива для animate() в jQuery!

    Но нужен bootstrap smile

    Рейтинг: 0
  2. Надежда Давыдова

    Да, прогресс дарит нам все новые и новые возможности. Я хотя и придерживаюсь минимализма, но иногда такие «фишки» бывают очень полезны. Главное — не перегрузить страницу эффектами, чтобы она не превратилась в новогоднюю елку. Знаю пару таких сайтов )))

    P.S. «Препопределённые эффекты» — явно здесь ошибка.

    Рейтинг: 0
    • jQuery, который используется много где, на минимализм не годится. Понятно, что если он есть, почему бы не использовать его эффекты? Но когда всё делается с нуля, и хочется при наведении на какие-то элементы их плавно анимировать, можно не подключать тяжёлые JS-библиотеки. CSS3 для этого вполне подходит, а вся отрисовка выполнится силами браузера, что тоже хорошо — меньше кодить.
      И обойдётся вся эта прелесть в пару строк на каждый эффект: один transition для :hover, один для «возвратной анимации».

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

      Рейтинг: 0
  3. Да … есть у FF пара неприятностей. Слишком тяжелый сам по себе и стили иногда ведут себя не так, как ожидалось(примерно 3-4% мелких погрешностей поведения в сравнении с теми же 20% косяков IE).

    Мне кажется исправят. Оно в Chrome так же было сначала. Потом так-же как в Safari сделали.
    Подправится.

    Рейтинг: 0

Оставить комментарий

Политика конфиденциальности

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

Принять