Что такое CSS3 переходы и как мы можем их использовать

Обычно при стилизации гиперссылок с использованием CSS обеспечивают для них выделенное состояние, в котором они будут пребывать при наведении на них указателя мыши. Это позволит ясно дать понять пользователям, что элемент, на который они наводят указатель, представляет собой ссылку. Такие состояния менее актуальны для растущего количества пользователей устройств с сенсорными экранами, однако для всех остальных они являются примером отличного и простого взаимодействия между сайтом и пользователем.

По традиции, если используется только CSS, то выделенные состояния работают по принципу «включено/выключено». Одно состояние принято по умолчанию и моментально сменяется на другое при наведении указателя мыши. Однако CSS3-переходы, как следует из их названия, позволяют обеспечивать определенный переход из одного состояния в другое.

В предыдущей главе мы создали с помощью CSS3 ссылку-кнопку с красным градиентным фоном. Вот CSS3-код, который мы использовали (ради краткости из него убраны дополнительные префиксы поставщиков):

#content a {

Text-decoration: none;

Font: 2.25em /* 36pxx16 */ ‘BebasNeueRegular’;

Background-color: #b01c20;

Border-radius: 8px;

Color: #ffffff;

Padding: 3%;

Float: left;

Background: linear-gradient (90deg, #b01c20 0%, #f15c60 100%); margin-top: 30px;

Box-shadow: 5px 5px 5px hsla (0, 0%, 26.6667%, 0.8); text-shadow: 0px 1px black; border: 1px solid #bfbfbf;

}

Добавим выделенное состояние:

#content a: hover {

Border: 1px solid #000000; color: #000000; text-shadow: 0px 1px white;

}

На рисунке 7.1 показано первое состояние, которое определено по умолчанию.

А вот выделенное состояние при наведенном указателе мыши (рисунок 7.2).

При наведении указателя мыши просто изменяется текст, отбрасываемая им тень и цвет границы. Таким образом, как вы, возможно, уже догадались, при использовании текущего CSS-кода наведение указателя мыши будет приводить к моментальному переходу из первого состояния (белый текст) во второе (черный текст). Это работа по принципу «включено/выключено». Добавим немного CSS3-магии в наше первое правило:

#content a {

/*…имеющиеся стили™*/ transition: all 1s ease 0s;

}

Неактивная ссылка

Ссылка при наведенном указателе мыши.

Теперь, если навести указатель мыши на ссылку-кнопку, то текст, отбрасываемая им тень и цвет границы будут плавно переходить из одного состояния в другое. Вы заметите, что к исходному элементу применяется переход, а не выделенное состояние. Это установлено для того, чтобы при других состояниях, например при активном, когда пользователь щелкает на ссылке кнопкой мыши, также могли задаваться другие стили и выполняться переход. Поэтому помните, что объявление перехода необходимо добавлять для элемента в том состоянии, из которого будет выполняться переход. Но как фактически работают переходы?