ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

CSS Переходы


CSS Переходы

CSS-переходы позволяют плавно изменять значения свойств в течение заданного периода времени.

 Наведите курсор на элемент ниже, чтобы увидеть эффект CSS перехода:

CSS

В этой главе вы узнаете о следующих свойствах:

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Браузерная поддержка переходов

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
transition 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

Специальные браузерные префиксы

Некоторым старым браузерам нужны специальные префиксы (-webkit-), чтобы понять свойства перехода:

Пример

div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 2s; /* Safari до 6.1 */
  transition: width 2s;
}
Попробуйте сами »

Как использовать CSS-переходы?

Чтобы создать эффект перехода, необходимо указать две вещи:

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

Примечание: Если часть продолжительности не указана, переход не будет иметь никакого эффекта, поскольку значение по умолчанию равно 0.

В следующем примере показан красный элемент <div> размером 100px * 100px. Элемент <div> также указал эффект перехода для свойства width с длительностью 2 секунды:

Пример

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

Эффект перехода начнется, когда указанное свойство CSS (width) изменит значение.

Теперь давайте зададим новое значение для свойства width, когда пользователь наводит курсор на элемент <div>:

Пример

div:hover {
  width: 300px;
}
Попробуйте сами »

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


Изменить несколько значений свойств

В следующем примере добавляется эффект перехода для свойства width и height с продолжительностью 2 секунды для ширины и 4 секунд для высоты:

Пример

div {
  transition: width 2s, height 4s;
}
Попробуйте сами »

Укажите кривую скорости перехода

Свойство transition-timing-function задает кривую скорости эффекта перехода.

Свойство transition-timer-function может иметь следующие значения:

  • ease - определяет эффект перехода с медленным началом, затем быстрым, а затем медленным завершением (по умолчанию)
  • linear - определяет эффект перехода с одинаковой скоростью от начала до конца
  • ease-in - определяет эффект перехода с медленным стартом
  • ease-out - определяет эффект перехода с медленным окончанием
  • ease-in-out - определяет эффект перехода с медленным началом и окончанием
  • cubic-bezier(n,n,n,n) - позволяет определить свои собственные значения в функции кубического Безье

В следующем примере показаны некоторые из различных кривых скорости, которые можно использовать:

Пример

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
Попробуйте сами »

Задержка эффекта перехода

Свойство transition-delay указывает задержку (в секундах) для эффекта перехода.

В следующем примере перед запуском задержка составляет 1 секунду:

Пример

div {
  transition-delay: 1s;
}
Попробуйте сами »

Transition + Transformation (Переход + Трансформация)

В следующем примере добавляется эффект перехода к трансформации:

Пример

div {
  transition: width 2s, height 2s, transform 2s;
}
Попробуйте сами »

Больше примеров перехода

Свойства CSS перехода могут быть указаны по одному, например, так:

Пример

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}
Попробуйте сами »

или используя сокращенное свойство transition:

Пример

div {
  transition: width 2s linear 1s;
}
Попробуйте сами »


CSS Свойства перехода

В следующей таблице перечислены все свойства перехода CSS:

Свойство Описание
transition Сокращенное свойство для установки четырех свойств перехода в одно свойство
transition-delay Определяет задержку (в секундах) для эффекта перехода
transition-duration Определяет, сколько секунд или миллисекунд требуется эффекту перехода для завершения
transition-property Указывает имя свойства CSS, для которого предназначен эффект перехода
transition-timing-function Определяет кривую скорости эффекта перехода