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

18/04/2021

Что подарить друзьям на годовщину свадьбы

Люди, между которыми есть любовь и взаимопонимание, скрепляют отношения и зарождают новый союз, а дату… Read More

13/04/2021

Авторитетность домена и его влияние на SEO продвижение сайта

Для качественного SEO (поисковой оптимизации, раскрутки сайта) одним из важных показателей является Авторитет домена (Domain… Read More

27/03/2021

Как вывести деньги из PayPal – основные способы

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

26/03/2021

Как выбрать юбку под свою фигуру на LeBoutique

Юбка – мощный элемент женского гардероба, благодаря которому любой наряд будет выглядеть потрясающе стильно и… Read More

25/03/2021

Основные методы линкбилдинга: как получить качественные внешние ссылки на сайт

Поисковые системы (например, Google) проверяют технические характеристики вашего сайта, такие как скорость загрузки, удобство навигации,… Read More

24/03/2021