Учебник по CSS

ГЛАВНАЯ CSS Введение в CSS Синтаксис CSS Селекторы CSS CSS как сделать CSS-комментарии Цвета CSS CSS-фоны CSS границы CSS поля CSS-заполнение CSS высота/ширина Блочная модель CSS Схема CSS CSS-текст CSS-шрифты CSS-иконки CSS-ссылки CSS-списки CSS-таблицы Отображение CSS Максимальная ширина CSS Позиция CSS CSS Z-индекс CSS переполнение Плавающая CSS Встроенный блок CSS Выравнивание CSS Комбинаторы CSS Псевдокласс CSS CSS-псевдоэлемент Непрозрачность CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS CSS-формы CSS-счетчики CSS макет веб-сайта Единицы CSS Специфика CSS CSS! важно Математические функции CSS

CSS расширенный

CSS закругленные углы Изображения границ CSS CSS-фоны Цвета CSS Цветовые ключевые слова CSS CSS-градиенты CSS-тени Текстовые эффекты CSS Веб-шрифты CSS 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс

CSS Отзывчивый

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

CSS -сетка

Введение в сетку Контейнер сетки Элемент сетки

CSS SASS

Учебник по SASS

Примеры CSS

CSS-шаблоны Примеры CSS css викторина CSS-упражнения Сертификат CSS

Ссылки на CSS

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

CSS- переходы


CSS-переходы

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

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

CSS

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

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

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

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

Property
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

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

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

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

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

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

Пример

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

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

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

Пример

div:hover {
  width: 300px;
}

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


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

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

Пример

div {
  transition: width 2s, height 4s;
}


Задайте кривую скорости перехода

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

Свойство transition-timing-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;
}

Переход + трансформация

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

Пример

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;
}

Проверьте себя с помощью упражнений

Упражнение:

Добавьте 2-секундный эффект перехода для изменения ширины элемента <div>.

<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  : ;
}

div:hover {
  width: 300px;
}
</style>

<body>
  <div>This is a div</div>
</body>


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

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

Property Description
transition A shorthand property for setting the four transition properties into a single property
transition-delay Specifies a delay (in seconds) for the transition effect
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete
transition-property Specifies the name of the CSS property the transition effect is for
transition-timing-function Specifies the speed curve of the transition effect