• CSS3 Уроки

• CSS3 Уроки
• CSS3 Введение
• CSS3 Границы
• CSS3 Фон
• CSS3 Текстовые Эффекты
• CSS3 Шрифты
• CSS3 2D Трансформации
• CSS3 3D Трансформации
• CSS3 Переходы
• CSS3 Анимация
• CSS3 Многоколоночная Верстка
• CSS3 Интерфейс Пользователя

• CSS3 Справочники

• CSS3 Справочник
• CSS3 Единицы Измерения
• CSS3 Значения Цветов
• CSS3 Названия Цветов
• CSS3 HEX Значения Цветов

CSS3 Переходы

С CSS3 мы можем добавлять эффекты при изменении одного стиля на другой без использования Flash анимаций и скриптов JavaScript.

Переместите мышь над элементом ниже:

Поддержка Браузерами

Internet Explorer пока не поддерживает свойство transition.

Firefox 4 требует приставки -moz-.

Chrome и Safari требуют приставки -webkit-.

Opera требует приставки -o-.

Как это работает?

CSS3 переходы - это эффекты, которые позволяют элементу плавно изменять один стиль на другой.

Чтобы сделать это, вы должны указать две вещи:

• Указать свойство CSS, к которому вы хотите добавить эффект
• Определить продолжительность эффекта.

Пример Эффект перехода для свойства width, продолжительность: 2 секунды: div { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari и Chrome */ -o-transition: width 2s; /* Opera */ }

Замечание: Если свойство duration не указано, плавный переход не произойдет, потому что значение по умолчанию равно 0.

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

Пример Указать :hover для элементов <div>: div:hover { width:300px; } Попробуйте сами »

Замечание: Когда курсор мыши уходит за пределы области элемента, он плавно изменяется обратно к своему исходному стилю.

Несколько Изменений

Чтобы добавить эффект более чем к одному стилю, укажите несколько свойств, разделяя их запятыми:

Пример Добавление эффектов изменения ширины, высоты и трансформации: div { transition: width 2s, height 2s, transform 2s; -moz-transition: width 2s, height 2s, -moz-transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; -o-transition: width 2s, height 2s,-o-transform 2s; } Попробуйте сами »

Свойства Перехода

Следующая таблица перечисляет все свойства transition:

Два примера ниже устанавливает все свойства перехода:

Пример Использование всех свойств перехода в одном примере: div { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Firefox 4 */ -moz-transition-property:width; -moz-transition-duration:1s; -moz-transition-timing-function:linear; -moz-transition-delay:2s; /* Safari и Chrome */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; /* Opera */ -o-transition-property:width; -o-transition-duration:1s; -o-transition-timing-function:linear; -o-transition-delay:2s; } Попробуйте сами »

Пример Те же самые эффекты перехода, указанные с использованием сокращенного свойства: div { transition: width 1s linear 2s; /* Firefox 4 */ -moz-transition:width 1s linear 2s; /* Safari и Chrome */ -webkit-transition:width 1s linear 2s; /* Opera */ -o-transition:width 1s linear 2s; } Попробуйте сами »