Internet Explorer пока еще не поддерживает свойство transition.
Как это работает?
Переходы CSS3 являются эффектами, которые позволяют элементу постепенно изменяются от одного стиля к другому.
Для этого необходимо указать две вещи:
- Укажите свойства CSS к которым вы хотите добавить эффект
- Укажите продолжительность эффекта
div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
Примечание: Если промежуток времени не указан, переход не будет иметь никакого эффекта, так как значение по умолчанию равно 0.
Эффект
начнется, когда значение указанного свойства CSS меняется. Типичное
изменение свойства CSS, это когда пользователь наводит мышку над
элементом
Примечание: Если курсор мыши вышел из элемента, он постепенно изменяется обратно на оригинальный стиль.
Множественные изменения
Чтобы добавить эффект перехода для более чем одного стиля, добавьте больше свойств, разделенных запятыми
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
</style>Свойства перехода
В следующей таблице перечислены все свойства перехода:
| Свойство | Описание | CSS |
|---|
| transition | Сокращенное свойство для установки четырех свойств перехода в одном свойстве | 3 |
| transition-property | Определяет имя свойства CSS для которого переход применяется | 3 |
| transition-duration | Определяет продолжительность времени, в течении которого осуществляется переход. Значение по умолчанию 0 | 3 |
| transition-timing-function | Описывается, как расчитывается скорость во время перехода. Значение по умолчанию "ease" | 3 |
| transition-delay | Определяет, когда начнется переход. Значение по умолчанию 0 | 3 |
Два примера ниже устанавливают все свойства перехода
<style>
div
{
width:100px;
height:100px;
background:red;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}