стрілка вверх
Головна    Статті    Карта    Зв'язок   

CSS3 Transitions


квітень 2016 року


Стаття за матеріалом навчального ресурсу w3schools.com

Властивості елементу CSS3 Transitions

Елемент CSS3 transitions дозволяє змінювати значення властивостей елементів стилю більш мягко (перехід від одного значення до іншого) протягом вказаного часу.

Наприклад: Наведіть курсор на блок, щоб побачити ефект зміни властивостей блоку CSS3 transitions:

CSS3

Браузери, що підтримують Transitions

Номер в табличці вказує версію браузера, що повністью підтримує властивість Transitions.

Попередні версії браузера підтримують за наявності додаткового префікса.

Property браузер Chrome браузер Internet Explorer браузер Firefox браузер Safari браузер Opera
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?

Щоб застосувати властивість елементу із Transitions варто визначити два пункти:

- до якої властивості CSS ви плануєте застосувати ефект,

- вказати тривалість ефекту.

Зауважте! Якщо тривалість переходу не вказана, то ефект переходу відсутній, так як за замовчуванням значення тривалості переходу стоїть 0.

Слідуючий приклад показує перехід властивостей червоного блоку <div> розмірами 50px на 50px до зміни ширини блоку в 200px протягом 2 секунд.

div{
    width: 50px;
    height: 50px;
    background: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

div:hover { width: 200px; }



Зміна декількох властивостей стилю CSS

Слідуючий приклад показує перехід властивостей як по ширині блоку, так і по висоті блоку з тривалістью 2 секунди по ширині та 4 секунди з тривалістью по висоті:

div { -webkit-transition: width 4s, height 2s; /* Safari */
transition: width 4s, height 2s; }


Специфікація типів швидкості переходу Transition

Специфікація transition-timing-function визначає наступні типи переходу:

ease - визначає ефект переходу властивостей слідуючим чином: повільний старт, потім дещо швидше і в кінці знову повільно ( цей тип переходу встановлений за замовчуванням )

linear - однакова швидкість від початку до кінця переходу

ease-in - повільний старт

ease-out - повільно в кінці переходу

ease-in-out - визначає повільно спочатку та в кінці переходу

cubic-bezier(n,n,n,n) - дозволяє вам особисто визначити значення функції переходу


Начтупні зразки використовують різні типи швидкості переходу:

#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;}
linear
ease
ease-in
ease-out
ease-in-out


Затримка виконання ефекту переходу

Специфікація transition-delay визначає затримку виконання переходу (в секундах.)

Слідуючий приклад виконує перехід властивостей блоку із затримкою! на початку в 1 секунду:

div {
    -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;
}
delay: 1s


Перехід та Трансформація блоку

Слідуючий блок додатково демонструє трансформацію блоку:

div {
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    -webkit-transform: rotate(180deg); /* Safari */
    transform: rotate(180deg);
}
transform


Запис стилю переходу

Стиль переходу можна вказати повністью:

div {
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;
}

або можна записати скорочено:

div {
    transition: width 2s linear 1s;
}


Властивості CSS3 Transition

Property Description
transition Скорочений запис налаштувань чотирьох властивостей transition
transition-delay Вказує затримку в секундах для ефекту переходу
transition-duration Вказує скільки секунд чи мілісекунд повинен виконуватись перехід
transition-property Вказує до якої саме властивості необхідно застосувати перехід
transition-timing-function Вказує тип швидкості ефекту переходу