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:

najedź na ten element - div - kursorem myszki

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.

div {
  width:40%;
  height:80px;
  background-color:white;
  padding:15px;
  font-size:1.2em;
  border:3px solid #000;
  transition-duration:4s;
}

div:hover {
  width:80%;
  background-color:red;
}

Rezultat:

najedź na ten element - div - kursorem myszki

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:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      div {
        width:40%;
        height:80px;
        background-color:white;
        padding:15px;
        font-size:1.2em;
        border:3px solid black;
        transition-duration:4s;
        -webkit-transition-duration:4s; /* dla Google Chrome, Safari, Opera 15+ */
      }

      div:hover {
        width:80%;
        background-color:red;
      }
    </style>
  </head>

  <body>

    <div>
      najedź na ten element - div - kursorem myszki
    </div>

  </body>
</html>

Określając właściwości efektu transition możemy skorzystać z następujących właściwości CSS:

transition-property
Właściwość ta określa właściwości CSS, które maja brać udział w efekcie przejścia danego elementu HTML.
transition-duration
Właściwość ta określa czas trwania efektu przejścia.
transition-timing-function
Właściwość ta określa tempo efektu przejścia.
transition-delay
Właściwość ta określa czas opóźnienia efektu przejścia.
transition
Właściwość ta określa wszystkie wyżej wymienione 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.

div {
  width:40%;
  height:80px;
  background-color:white;
  padding:15px;
  font-size:1.2em;
  border:3px solid #000;
  transition-property:background-color;
  transition-duration:4s;
}

div:hover {
  width:80%;
  background-color:red;
}

Rezultat:

najedź na ten element - div - kursorem myszki

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.

div {
  width:40%;
  height:80px;
  background-color:white;
  padding:15px;
  font-size:1.2em;
  border:3px solid #000;
  transition-duration:4s;
  transition-timing-function:linear;
}

div:hover {
  width:80%;
  background-color:red;
}

Rezultat:

najedź na ten element - div - kursorem myszki

Nasz efekt transition może być nieco opóźniony. Efekt ten uzyskamy dzięki właściwości transition-delay.

div {
  width:40%;
  height:80px;
  background-color:white;
  padding:15px;
  font-size:1.2em;
  border:3px solid #000;
  transition-duration:4s;
  transition-delay:500ms;
}

div:hover {
  width:80%;
  background-color:red;
}

Rezultat:

najedź na ten element - div - kursorem myszki

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.

div {
  width:40%;
  height:80px;
  background-color:white;
  padding:15px;
  font-size:1.2em;
  border:3px solid #000;
  transition-property:width, background-color;
  transition-duration:1s, 3s;
  transition-timing-function:linear, ease-in;
  transition-delay:3s, 0s;
}

div:hover {
  width:80%;
  background-color:red;
}

Rezultat:

najedź na ten element - div - kursorem myszki

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.

div {
  width:40%;
  height:80px;
  background-color:white;
  padding:15px;
  font-size:1.2em;
  border:3px solid #000;
  transition:width 1s linear 3s, background-color 3s ease-in 0s;
}

div:hover {
  width:80%;
  background-color:red;
}

Rezultat:

najedź na ten element - div - kursorem myszki

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, to uzyskamy następujący rezultat:

element - p - pierwsza etykieta

element - p - druga etykieta

| Przenieś do etykiety - pierwsza | Przenieś do etykiety - druga |

Kod HTML ostatniego przykładu tej części kursu CSS został umieszczony poniżej:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      div > p {
        width:40%;
        height:80px;
        background-color:white;
        padding:15px;
        font-size:1.2em;
        border:3px solid black;
        transition-duration:1s;
        -webkit-transition-duration:1s; /* dla Google Chrome, Safari, Opera 15+ */
      }

      div > :target {
        width:80%;
        background-color:red;
      }
    </style>
  </head>

  <body>

    <div>
      <p id="pierwsza">element - p - pierwsza etykieta</p>
      <p id="druga">element - p - druga etykieta</p>

      <a href="#pierwsza">Przenieś do etykiety - pierwsza</a>
      <a href="#druga">Przenieś do etykiety - druga</a>
    </div>

  </body>
</html>

W następnej części kursu CSS poznamy czym są selektory czasu animacji.