Ознакомление с 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)

Recent Posts

Владимир Высоцкий

Я понимаю, как смешно Искать в глазах ответ, В глазах, которым все равно, Я рядом… Read More

25/07/2021

Брюс Ли

Нет такой фразы "Я не могу!" Сумел один, смогут и другие. Не смог никто -… Read More

21/07/2021

Иоганн Вольфганг фон Гете

К чему душе беззлобье, широта уму, Руке готовность действовать и воля, Когда в горячке зла… Read More

12/07/2021

Какой бойлер использовать для кухни

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

08/07/2021

Али ибн Абу Талиб

Лучше хранить молчание до тех пор, пока не спросят, чем говорить до тех пор, пока… Read More

07/07/2021

Мухаммад Окар

То, что вы имеете каждый день, кто-то ежедневно вымаливает Мухаммад Окар   Read More

01/07/2021