Понедельник , 23 Январь 2017
Конкурс «Книга за вопрос»
ДомойПубликацииЭффекты в 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+.

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

Поддержать проект

WebMoney

Яндекс.Деньги


Рейтинг: 0

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

1 209
не в сети 2 дня

x64 (aka andi)

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

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

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

    Но нужен bootstrap smile

    Рейтинг: 0
    • Альтернатива всяким setTimeout/setInterval отличная, ведь скорость и плавность зависит от прямоты рук разработчиков браузеров laugh
      PS: ох уж это бутстрап, чтоб его…

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

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

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

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

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

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

        А почему через неделю? )))
        Праздники?

        Рейтинг: 0
        • На самом деле, всё проще: замечается больше ошибок. Уж не знаю, почему у меня мозги так устроены, но суток/двух/трёх/… недостаточно. А спустя недельку, или даже побольше (видимо, когда текст подзабудется), нахожу множество косяков. Одной фразой если: нужен корректор smile

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

            Интересно )) У меня наверное все по-другому в голове работает: я вижу ошибки везде и всегда, а свои в первую очередь. Хотя… бывают и исключения ))

            Буду твоим корректором время от времени )))

            Рейтинг: 0
      • Вообще то одной хватит … На ease-in-out уже есть возврат, а нужен только :hover

        Рейтинг: 0
        • Возможно в других браузерах дела так и обстоят. В firefox, когда убираешь мыша с :hover-элемента, мгновенно происходит восстановление исходных стилей. Поэтому transition придётся прописать в двух местах, дабы и обратная анимация тоже была. Но это всё же легче легче, чем JS.

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

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

    Рейтинг: 0
    • Ещё неизвестно, что в Spartan наворотят. В Chrome поначалу тоже мало кто верил, а он раскрутился всем врагам назло.

      Рейтинг: 0
      • А ничего не натворят. Это ботаники систематической документации в большей части FF.
        Практики чисто у web-kit. Поэтому так оно исторически и есть

        Рейтинг: 0

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

Ваш email не будет опубликован.Необходимы поля отмечены *

*

Добавьте изображение (jpg/gif/png)

Авторизация

Регистрация

Пароль не введен

Генерация пароля