Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

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 Комбинаторы CSS Псевдоклассы CSS Псевдоэлементы CSS Прозрачность CSS Навигация сайта CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Атрибут селектора CSS Формы CSS Счетчики CSS Макет сайта CSS Единицы измерений CSS Особенности CSS !important CSS Математ. функции

CSS3 Учебник

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

CSS Адаптивный

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

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

CSS Макеты 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:

CSS3

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

  • 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

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

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

  • в свойство CSS3 добавить эффект
  • длительность эффекта

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

В следующем примере показан элемент 100px * 100px red <div>. Для элемента <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 {
    -webkit-transition: width 2s, height 4s; /* Safari */
    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) - позволяет определить собственные значения в функции cubic-bezier

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

Пример
#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;
}
Попробуйте сами »

Еще примеры перехода

Свойства перехода CSS3 можно задать по одному, например:

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

или с помощью сокращенного свойства transition:

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

CSS3 Упражнения

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

Упражнение:

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

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

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

<body>
  <div>Это div</div>
</body>


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

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

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