Обычно при изменении значения свойства CSS браузер немедленно обновляет соответствующий стиль. Например, при наведении курсора мыши на элемент стиль, определенный с помощью селектора :hover, будет немедленно применен к элементу. В CSS3 добавлена функция перехода, с помощью которой можно плавно переходить элементы из одного стиля в другой за заданное время, аналогично простой анимации, но не прибегая к использованию Flash или JavaScript.
CSS предоставляет 5 свойств, связанных с переходом, а именно:
Чтобы успешно реализовать эффект перехода, необходимо определить две вещи:
(1) Свойства параметров и эффекты перехода в элементах;
(2) Продолжительность эффекта перехода.
Совет: Эффект перехода обычно возникает при наведении указателя мыши на элемент. Если продолжительность перехода не установлена, эффект перехода не вступит в силу, поскольку значение времени перехода по умолчанию равно 0.
1. свойство перехода
Атрибут свойства перехода используется для установки имени атрибута в элементе, который участвует в переходе. Формат синтаксиса следующий:
свойство перехода: нет | все | свойство;
Описание параметра следующее:
none: указывает, что никакие атрибуты не участвуют в эффекте перехода;
all: указывает, что все атрибуты участвуют в эффекте перехода;
свойство: определяет список имен свойств CSS, которые применяют эффекты перехода. Используйте запятые для разделения нескольких имен свойств.
Пример кода выглядит следующим образом:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;border:3pxsolidblack;margin:10px0px0px10px;transition-property:width,background;}div:hover{width:200px;background- цвет:синий;</style></head><body><div></div></body></html>Результаты запуска:
2. продолжительность перехода
Атрибут period-duration используется для установки времени, необходимого для перехода (в секундах или миллисекундах). Синтаксис следующий:
продолжительность перехода:время;
Среди них время — это время, необходимое для завершения эффекта перехода (в секундах или миллисекундах). Значение по умолчанию — 0, что означает отсутствие эффекта.
Если в переходе участвуют несколько атрибутов, вы также можете установить время перехода для этих атрибутов по очереди. Используйте запятые для разделения нескольких атрибутов, например, длительность перехода: 1 с, 2 с, 3 с;. Кроме того, вы также можете использовать время, чтобы установить время, необходимое для перехода для всех свойств, участвующих в переходе. Пример кода выглядит следующим образом:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;border:3pxsolidblack;margin:10px0px0px10px;transition-property:width,background;transition-duration:.25s,1s;}div :hover{width:200px;background-color:blue;</style></head><body><div></div></body></html>3. функция времени перехода
Атрибутtransition-timing-function используется для установки типа анимации перехода. Необязательные значения атрибута следующие:
4. переход-задержка
Атрибут «transition-delay» используется для установки момента начала эффекта перехода. Синтаксический формат атрибута следующий:
задержка перехода: время;
Среди них параметр time используется для установки времени ожидания до начала эффекта перехода в секундах или миллисекундах.
5. переход
Атрибут перехода является аббревиатурой четырех вышеуказанных атрибутов. С помощью этого атрибута указанные выше четыре атрибута могут быть установлены одновременно. Синтаксический формат атрибутов следующий:
переход:переход-свойствопереход-продолжительностьпереход-время-функцияпереход-задержка;
В атрибуте перехода свойства перехода и продолжительность перехода являются обязательными параметрами, а функция времени перехода и задержка перехода являются необязательными параметрами. Их можно опустить, если в этом нет необходимости. Кроме того, с помощью атрибута перехода также можно установить несколько групп эффектов перехода. Каждая группа разделяется запятыми. Пример кода выглядит следующим образом: