САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

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 Особенности

CSS3 Учебник

CSS3 Закругленные углы CSS3 Границы CSS3 Слои фона CSS3 Цвета CSS3 Градиент CSS3 Тени CSS3 Эффект текста CSS3 Веб шрифты CSS3 2D трансформация CSS3 3D трансформация 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 PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы

СSS3 Трансформация



CSS3 трансформация

CSS3 трансформация позволяет плавно изменять значения свойств (от одного значения к другому) в течение заданного времени.

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

CSS3

Поддержка браузера трансформации

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

Номер, за которыми следуют -webkit-,-moz-, или -o- указывает первую версию, которая работает с префиксом.

Свойство
transition 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-delay 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-duration 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-property 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-timing-function 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-

Как использовать CSS3 трансформацию?

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

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

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

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

Пример

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* Safari */
    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 {
    -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;
}
Редактор кода »

Переход + преобразование

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

Пример

div {
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    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 перехода

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

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