41. Poznajemy właściwości efektu przejścia - transition CSS3
Jedną z nowości, jaka została dodana do języka CSS, jest właściwość transition. Wspomniana właściwość pozwala nam utworzyć pewien efekt animacji. Wspomniana animacja będzie prezentować zmianę wartości określonych właściwości CSS dla danego elementu HTML. W efekcie tym zobaczymy przejście jednych wartości właściwości CSS w drugie (np. białe tło elementu HTML zmieni się na kolor czerwony, czyli wartość white właściwości background-color zmieni się na wartość red), dlatego efekt transition możemy nazywać również efektem przejścia.
Aby utworzyć efekt transition w danym elemencie HTML musimy wykonać kilka czynności. Po pierwsze musimy utworzyć dodatkowy wygląd dla danego elementu HTML, który zostanie aktywowany w jakiś dynamiczny sposób, np. w momencie gdy najedziemy na jego obszar kursorem myszki. Wspomniany efekt możemy uzyskać za pomocą selektora :hover. Tworzymy następujące reguły CSS:
div {
width:40%;
height:80px;
background-color:white;
padding:15px;
font-size:1.2em;
border:3px solid #000;
}
div:hover {
width:80%;
background-color:red;
}Rezultat:
Gdy najedziemy kursorem myszki na element div, który został zaprezentowany powyżej, jego kolor tła, czyli właściwość background-color, zmieni się na kolor czerwony (red), natomiast jego wartość szerokości, czyli właściwość width, zmieni się na wartość 80%.
Opisana zmiana dokona się momentalnie, w mgnieniu oka, gdy najedziemy na element div kursorem naszej myszki, jednak dzięki właściwościom CSS, które należą do grupy transition, wspomniana zmiana wartości właściwości CSS może trwać dłużej.
Do reguły CSS, która określa wygląd elementu div, dodajemy właściwość transition-duration wraz z wartością 4s, dzięki czemu cały efekt zmiany wartości właściwości CSS na te wartości właściwości CSS, które zostały określone w regule CSS, która zawiera selektor :hover, będzie trwał cztery sekundy, czyli 4s.
Rezultat:
Gdy najedziemy kursorem myszki na element div, który został zaprezentowany powyżej, jego kolor tła, czyli właściwość background-color, zmieni się na kolor czerwony (red), natomiast jego wartość szerokości, czyli właściwość width, zmieni się na wartość 80%, jednak tym razem zmiany te będą trwały cztery sekundy, ponieważ do wspomnianego elementu div została dodana właściwość transition-duration wraz z wartością 4s, która określa długość czasu efektu przejścia.
Kod dokumentu HTML został umieszczony poniżej:
Określając właściwości efektu transition możemy skorzystać z następujących właściwości CSS:
Domyślnie wszystkie właściwości CSS, jakie użyjemy w regule CSS z selektorem :hover, będą brały udział w efekcie przejścia danego elementu HTML, jednak zależność tą możemy zmienić za pomocą właściwości transition-property.
Rezultat:
Dzięki właściwości transition-property oraz wartości background-color sprawiliśmy, że tylko właściwość background-color bierze udział w efekcie przejścia.
Za pomocą właściwości transition-timing-function możemy określić tempo efektu przejścia, np. możemy sprawić, aby efekt transition miał stałe tempo, za pomocą wartości linear.
Rezultat:
Nasz efekt transition może być nieco opóźniony. Efekt ten uzyskamy dzięki właściwości transition-delay.
Od tej pory nasz efekt przejścia jest opóźniony o pół sekundy, ponieważ do elementu div została dodana właściwość transition-delay wraz z wartością 500ms (jedna sekunda to 1000ms).
Za pomocą właściwości transition-property możemy sprawić, że każda właściwość, która bierze udział w naszym przykładowym efekcie transition, będzie miała swoje indywidualne cechy.
Rezultat:
Cechy efektu przejścia dla poszczególnych właściwości CSS, które zostały zaprezentowany powyżej, możemy również zapisać za pomocą jednej właściwości CSS, czyli właściwości transition.
Gdy dodamy właściwości transition do elementu HTML to będzie miał on w sobie określone cechy efektu przejścia, które uaktywnią się, gdy w jakieś sytuacji zostanie dokonana próba zmiany wartości jego właściwości CSS, dlatego selektor pseudoklasy :hover nie jest jedynym selektorem pseudoklasy, który może wpłynąć na uaktywnienie efektu przejścia.
Innymi selektorami pseudoklasy, które mogą wpłynąć na aktywowanie efektu przejścia, są na przykład: :focus, :active, :target.
Przykładowo selektor :target określa wygląd etykiety, do której przenieśliśmy się poprzez kliknięcie w element a. Gdy dla danej etykiety określimy właściwości transition oraz utworzymy dla niej regułę CSS, która będzie zawierała w sobie selektor :target.
Kod HTML ostatniego przykładu tej części kursu CSS został umieszczony poniżej:
W następnej części kursu CSS poznamy czym są selektory czasu animacji.
Last updated