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 | Определяет линию скорости эффекта перехода |