Создание сайтов с нуля - урок 36 - Плавные переходы в CSS

CSS-переходы позволяют плавно изменять CSS-свойства элементов, т.е. делать это не мгновенно (за 15-16 миллисекунд), а в течении необходимого Вам времени.

Для работы с переходами всего существует 4 отдельных CSS-свойства и еще одно групповое.

Начнем со свойства transition-duration, которое задает промежуток времени в секундах или миллисекундах, в течение которого должна произойти смена CSS-свойства с одного значения на другое. Например:  transition-duration: 2s;

Следующее свойство - transition-property. В нем указывается название CSS-свойств, к которым будет применен эффект плавного перехода. Причем может быть указано как одно свойство, так и несколько через запятую. Например: transition-property: background-color, width, height;

Это свойство также может принимать значение none, что будет запрещать плавный переход для все свойств, либо значение all, которое является значением по умолчанию и задает плавный переход для всех свойств элемента, которые поддерживают плавность изменения состояния.

Следующее свойство, transition-timing-function, задает функцию перехода, которая определяет с какой скоростью и ускорением будут меняться свойства во время перехода. Например, посмотрите визуальную разницу между:

• transition-timing-function: linear;
• transition-timing-function: easy;

Стандартные значения функции transition-timing-function:
- ease - значение по умолчанию. Переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).
- linear - переход происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,1).
- ease-in - переход начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1).
- ease-out - переход медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1).
- cubic-bezier(x1, y1, x2, y2) - позволяет вручную установить значения от 0 до 1 для кривой ускорения.

Более подробно о функции cubic-bezier можно почитать на ресурсах cubic-bezier.com и easings.net

Четвертое свойство - transition-delay - задержка перехода, позволяет осуществлять переход не сразу, а через заданное время. Значение свойства задается в секундах или миллисекундах. Например: transition-delay: 2s;

Групповое свойство transition позволяет объединить в одну строку все 4 рассмотренные нами ранее свойства, отвечающие за изменение внешнего вида элемента. Например: transition: color 2s linear 1s;

В свойстве transition порядок написания значений произвольный, но нужно учитывать, что из временных параметров первое значение будет для transition-duration, а второе - для transition-delay.

Какие есть нюансы?

1. Все свойства необязательны, кроме transition-duration. Если их не задавать, то будут установлены значения по умолчанию. Если не задать transition-duration, то плавного перехода не будет. Фактически, это свойство является ключевым.

2. Можно задавать разные переходы для разных свойств элемента, не обязательно, чтобы, например, и ширина цвет фона происходили одновременно.

Пример для полной формы записи:
transition-property: width, background-color;
transition-duration: 2s, 2s;
transition-delay: 0s, 2s;

Пример для сокращенной формы записи: transition: width 2s, background-color 2s 2s;

3. Плавные переходы можно применять к псевдоэлементам ::before и ::after.

4. Плавные переходы и анимацию можно применить только к некоторым CSS-свойствам. В основном это свойства, изменяющие размер, цвет, позицию элементов. Перечень анимируемых свойств можно посмотреть на ресурсе MDN.

5. С помощью transition можно анимировать переход только между двумя состояниями: начальным и конечным. Если же Вам необходимо создание анимации с несколькими промежуточными значениями, то тогда необходимо смотреть в сторону CSS-анимации.

Ещё один возможный тип значений для свойства transition-timing-function - это steps. Он позволяет задать шаги, или ступеньки, как их еще называют, по которым будет идти переход. Пример: transition-timing-function: steps(10, start);

Тут всё просто:
- 10 - это число шагов, за которые будет выполнен переход:
- start - это направление (может принимать значение start или end).

При заданном start первый шаг выполняется одновременно с началом перехода, а в случае c end последний шаг будет выполнен вместе с завершением перехода.