CSS - СSS3 Трансформация
CSS3 трансформация
CSS3 трансформация позволяет плавно изменять значения свойств (от одного значения к другому) в течение заданного времени.
Пример: Наведите курсор на элемент ниже, чтобы увидеть эффект перехода CSS:
Поддержка браузера трансформации
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номер, за которыми следуют -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>:
Обратите внимание, что при наведении курсора мыши на элемент он постепенно возвращается к исходному стилю.
Изменить несколько значений свойств
В следующем примере добавляется эффект перехода для свойства 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: 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:
Проверьте себя с помощью упражнений!
Свойства CSS3 перехода
В следующей таблице перечислены все свойства transition CSS:
| Свойство | Описание |
|---|---|
| transition | Сокращенное свойство для установки четырех свойств перехода в одно свойство |
| transition-delay | Задает задержку (в секундах) для эффекта перехода |
| transition-duration | Указывает, сколько секунд или миллисекунд требуется для завершения эффекта перехода |
| transition-property | Задает имя свойства CSS эффект перехода для |
| transition-timing-function | Определяет линию скорости эффекта перехода |
