Ознакомление с CSS-переходами (transition)

В сегодняшней статье мы проведем ознакомительный рейд по полезным, как я надеюсь, вопросам CSS-переходов. Это новое свойство в CSS3 позволяет создавать на сайте привлекательную и «магическую» интерактивность, даже без использования JavaScript. Рассмотрим также некоторые практические примеры применения этого свойства в CSS.

Развитие языка CSS в последние годы сделало возможной реализацию некоторых действительно удивительных нововведений. Если еще 5 лет назад для создания некой интерактивности на сайте требовалась такая программа, как, например, Adobe Flash, и использование языка программирования JavaScript, то сегодня практически все это можно реализовать с помощью только HTML и CSS.

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

Хотя, с другой стороны, эти новшества для многих остаются непонятными и недопонятыми. Чтобы пролить свет на эти новшества, мы и задумали публикацию данного поста.

Что такое CSS-переходы (transition)?

Переходы в CSS позволяют изменять значения свойств элемента за заданный период времени. Другими словами, осуществляется переход от одного состояния к другому. Например, блок div имеет белый фоновый цвет – это его начальное состояние. А мы хотим, чтобы при наведении курсора на этот блок, фоновый цвет изменялся на черный – это и будет его новым состоянием. Для подобного трюка можно было бы использовать и простое свойство :hover, но качественное отличие transition заключается именно в возможности задавать время для перехода, — что позволяет добавить «плавности» такому переходу.

transition присваивается определенному блоку в его «спокойном» (обычном) состоянии. Чтобы создать переход, необходимо выбрать CSS-свойство, к которому будет применяться переход (например, цвет фона — background-color), а потом указать продолжительность такого эффекта (в секундах). Учтите, что если продолжительность эффекта не установлена, переход просто не произойдет. Также, вместо указания определенного свойства CSS, можно указать все свойства (используйте ключевое слово all).

Есть четыре свойства transition:

  • transition-property – указывает на имя свойства CSS, для которого предназначен эффект перехода (например, background-color, color, font-size и другие), или же можно указать все свойства CSS (используется ключевое слово all).
  • transition-duration – определяет продолжительность перехода, в секундах (s) или миллисекундах (ms)
  • transition-timing-function – определяет кривую скорости эффекта для перехода. Т.е., отвечает за тип изменения скорости перехода. В этом свойстве нет вариантов «быстро» или «медленно». Вместо этого используются варианты кривой, по которой идет изменение от одной скорости к другой. Например, очень популярное свойство ease, которое подразумевает: сначала медленно, затем быстро, и потом медленно
  • transition-delay – определяет задержку перед выполнением перехода, в секундах (s). Можно не указывать.

Весь синтаксис выглядит так:

div {
  transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

Пример кода CSS, когда при наведении на блок div, происходит изменение (переход) фонового цвета за 0,5 секунд:

div {
  transition: background-color 0.5s ease;
  background-color: white;
}

div:hover {
  background-color: black;
}

Пример кода CSS, когда при наведении на все теги p (абзацы) изменяются их размер шрифта и цвет за 1 секунду:

p {
  transition: all 1s ease;
  color: white;
  font-size: 14px;
  background-color: black;
  padding: 25px;
}

p:hover {
  color: black;
  font-size: 16px;
  background-color: white;
}

Демо-пример кода

Смотреть Пен Ознакомление с CSS-переходами (transition) by ZAnatoly (@ZAnatoly) на CodePen.

Практически все современные браузеры поддерживают это свойство, но для большей совместимости нужно использовать префиксы браузеров, причем стандартный синтаксис объявляется последним:

.div {
  -webkit-transition: color 0.5s ease-in 1s;
  -moz-transition: color 0.5s ease-in 1s;
  -o-transition: color 0.5s ease-in 1s;
  transition: color 0.5s ease-in 1s;
}

В продолжение темы: Ознакомление с CSS-анимацией (animation)

Tags: CSS3HTML5

Recent Posts

Отопление и горячая вода – когда нужно, а не когда соизволят включить

Тепло в доме и горячая вода в любое время для многих жителей многоквартирных и частных… Read More

19/09/2020

Инструкция по скачиванию видео с сервиса TikTok (бесплатно и без watermark)

Если вы еще не слышали о TikTok, тогда рекомендуем вам сначала ознакомиться с этим кратким… Read More

17/09/2020

Что есть в бюджетном ноутбуке – на какие характеристики рассчитывать?

Прошли те времена, когда приличный ноутбук стоил от 1000 долларов. Сегодня можно купить довольно неплохой… Read More

16/09/2020

Что лучше – цифровое телевидение Т2 или интернет-телевидение?

Современную жизнь невозможно представить без телевидения. Оно позволяет узнавать о событиях в Украине и мире,… Read More

02/09/2020

Гипоаллергенная подушка. Для чего она важна?

Сейчас найдется мало людей, у которых нет аллергии на продукты или пыльцу растений. Считается, что… Read More

28/08/2020

Футбольный Инстаграм: что нового у топовых футболистов

Некоторые известные футболисты тщательно скрывают свои личную жизнь, а другие - активно постят фотографии с… Read More

24/08/2020