CSS3 Transitions
CSS3 переходы позволяет изменять значения свойств плавно (от одного значения к другому), в течение определенного срока.
Пример: Наведите курсор мыши на элемент ниже , чтобы увидеть 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 Transitions?
Для создания эффекта перехода, необходимо указать две вещи:
- свойство CSS вы хотите добавить эффект
- длительность эффекта
Примечание: Если длительность часть не указана, то переход не будет иметь никакого эффекта, так как значение по умолчанию равно 0.
Следующий пример показывает 100px * 100px красный <div> элемент. <div> элемент также указан эффект перехода для ширины собственности, с длительностью 2 секунды:
пример
div
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
Эффект перехода начнется, когда заданное свойство CSS (ширина) изменяет значение.
Теперь, давайте указать новое значение ширины собственности , когда пользователь наводит мышь на <div> элемент:
Обратите внимание на то, что когда курсор мышки из элемента, он будет постепенно вернуться к своим оригинальным стилем.
Изменение Несколько значений свойств
Следующий пример добавляет эффект перехода как для ширины и высоты имущества, с длительностью 2 секунды для ширины и 4 секунды для высоты:
пример
div
{
-webkit-transition: width 2s, height 4s; /*
Safari */
transition: width 2s, height 4s;
}
Попробуй сам " Укажите скорость кривой перехода
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 :
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »
Свойства CSS3 Переходные
В следующей таблице перечислены все свойства перехода:
| Имущество | Описание |
|---|---|
| transition | Сокращённое свойство для установки четырех свойств перехода в одно свойство |
| transition-delay | Определяет задержку (в секундах) для эффекта перехода |
| transition-duration | Определяет, сколько секунд или миллисекунды эффект перехода требуется для завершения |
| transition-property | Задает имя свойства CSS эффект перехода для |
| transition-timing-function | Определяет скорость кривой эффекта перехода |