CSS3 - Przejście (transition)

Kaskadowe arkusze stylów pozwalają na tworzenia płynnego przejścia pomiędzy różnymi wartościami tej samej właściwości. Przejście jest reakcją na zdarzenie. Najczęściej wykorzystywane jest dla zdarzenia :hover, jako akcja po najechaniu kursorem na element, który ma zostać przekształcony.

Zobacz:


Przykład przejścia

Najedź kursorem myszki na ten element, aby zobaczyć jak działa efekt przejścia.
<div>Najedź kursorem myszki na ten element, aby zobaczyć jak działa efekt przejścia.</div>
div {
   margin: 0 auto;
   width: 150px;
   height: 100px;
   background-color: red;
   color: white;
   padding: 10px;
   transition: all 2s ease-in-out 0.5s;
   -webkit-transition: all 2s ease-in-out 0.5s;   
}
	 
div:hover {
   width: 550px;
   background-color: blue;
}

Zbiorczy zapis właściwości przejścia - transition

Właściwości podlegające przejściu, czas trwania, krzywą prędkości oraz czas do rozpoczęcia przejścia po zajściu zdarzenia można określić w jednej zbiorczej deklaracji. Służy do tego właściwość transition.

transition: -property -duration -timing-function -delay | initial | inherit;

Wartości właściwości transition:

Wartość Opis
transition-property Określa właściwości, które będą podlegały przejściu. W przypadku więcej niż jednej rozdzielane są przecinkami.
Wartość domyślna "all". 
transition-duration Określa czas trwania przejścia.
Wartość domyślna "0".
transition-timing-function Określa krzywą prędkości przejścia.
Wartość domyślna "ease".
transition-delay Określa po jakim czasie od zajścia zdarzenia efekt się rozpocznie.
Wartość domyślna "0".
initial Ustawia wartość właściwości na domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

div {
   transition: all 2s ease-in-out 0.5s;
   -webkit-transition: all 2s ease-in-out 0.5s;
}

Chrome, Firefox, Opera, Safari 6.1+, IE 10+ obsługują właściwość transition.
Safari 3.1 - 6 obsługuje alternatywę -webkit-transition.

Powyższy zbiorczy zapis jest równoważny z zapisem:

div {
   transition-property: all;
   transition-duration: 2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0.5s;
   -webkit-transition-property: all;
   -webkit-transition-duration: 2s;
   -webkit-transition-timing-function: ease-in-out;
   -webkit-transition-delay: 0.5s;
}

Właściwości podlegające przejściu - transition-property

Właściwość transition-property określa właściwości, które będą podlegały efektowi przejścia.

transition-property: all | właściwość | none | initial | inherit;

Wartości właściwości transition-property:

Wartość Opis
all Przejście dotyczy wszystkich właściwości.
Wartość domyślna.
właściwość Jedna lub więcej właściwości podlegających przejściu. Nazwy właściwości oddzielane są przecinkami.
none Żadna z właściwości nie podlega przejściu.
initial Ustawia wartość właściwości na domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

div {
   transition-property: width, background-color;
   -webkit-transition-property: width, background-color;
}

Chrome, Firefox, Opera, Safari 6.1+, IE 10+ obsługują właściwość transition-property.
Safari 3.1 - 6 obsługuje alternatywę -webkit-transition-property.


Czas trwania przejścia - transition-duration

Właściwość transition-duration określa czas trwania przejścia.

transition-duration: czas | initial | inherit;

Wartości właściwości transition-duration:

Wartość Opis
czas Czas trwania przejścia określany jest w jednostkach czasu (s, ms). Na przykład 2s.
Wartość domyślna "0".
initial Ustawia wartość właściwości na domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

div {
   transition-duration: 2s;
   -webkit-transition-duration: 2s;
}

Chrome, Firefox, Opera, Safari 6.1+, IE 10+ obsługują właściwość transition-duration.
Safari 3.1 - 6 obsługuje alternatywę -webkit-transition-duration.


Krzywa prędkości przejścia - transition-timing-function

Właściwość transition-timing-function określa krzywą prędkości przejścia.

transition-timing-function: cubic-bezier(x, x, x, x) | linear | ease | ease-in | 
ease-out | ease-in-out | initial | inherit;

Wartości właściwości transition-timing-function:

Wartość Opis
cubic-bezier(x, x, x, x) Własna krzywa prędkości przejścia z krzywej Beziera. Możliwe wartości x od 0 do 1.
linear Przejście ma tą samą prędkość od początku do końca. Równoważne
cubic-bezier(0, 0, 1, 1).
ease Przejście ma wolny początek, później przyspiesza i na końcu zwalnia. Równoważne cubic-bezier(0.25, 0.1, 0.25, 1).
Wartość domyślna.
ease-in Przejście ma wolny początek. Równoważne cubic-bezier(0.42, 0, 1, 1).
ease-out Przejście ma wolny koniec. Równoważne cubic-bezier(0, 0, 0.58, 1).
ease-in-out Przejście ma wolny początek i wolny koniec. Równoważne cubic-bezier(0.42, 0, 0.58, 1).
initial Ustawia wartość właściwości na wartość domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

div {
   transition-timing-function: ease-in-out;
   -webkit-transition-timing-function: ease-in-out;
}

Chrome, Firefox, Opera, Safari 6.1+, IE 10+ obsługują właściwość transition-timing-function.
Safari 3.1 - 6 obsługuje alternatywę -webkit-transition-timing-function.


Czas do rozpoczęcia przejścia - transition-delay

Właściwość transition-delay określa czas do rozpoczęcia przejścia po zajściu zdarzenia.

transition-delay: czas | initial | inherit;

Wartości właściwości transition-delay:

Wartość Opis
czas Czas do rozpoczęcia przejścia określany jest w jednostkach czasu (s, ms). Na przykład 2s.
Wartość domyślna "0".
initial Ustawia wartość właściwości na domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

div {
   transition-delay: 0.5s;
   -webkit-transition-delay: 0.5s;
}

Chrome, Firefox, Opera, Safari 6.1+, IE 10+ obsługują właściwość transition-delay.
Safari 3.1 - 6 obsługuje alternatywę -webkit-transition-delay.


Właściwości przejścia

Właściwość Opis CSS
transition Zbiorczy zapis wszystkich właściwości animacji.
Wartość domyślna "all 0 ease 0".
3
transition-delay Określa po jakim czasie od zdarzenia efekt się rozpocznie.
Wartość domyślna "0".
3
transition-duration Określa czas trwania przejścia.
Wartość domyślna "0".
3
transition-property Określa które właściwości będą podlegały efektowi przejścia.
Wartość domyślna "all".
3
transition-timing-function Określa krzywą prędkości przejścia.
Wartość domyślna "ease".
3