CSS dla początkujących: transitionsOkoło 9 minut

Chyba wiem, o co ci chodzi, więc pozwól, że zasugeruję... :)

Jeżeli zaczynacie tworzyć strony internetowe, pewnie nie jest wam obcy CSS i pojęcia takie jak margin, padding, border, background, color. Możecie powiedzieć, czym różni się klasa od id i dlaczego nie stylujemy inline. Tak, Krzysiek, do ciebie mówię, mam nadzieję, że to kiedyś przeczytasz. Możliwe, że przeglądacie inne strony w poszukiwaniu inspiracji. Widzicie zapierające dech w piersiach animacje, przycinane elementy, płynne przejścia… I zero JavaScriptu.

W takich sytuacjach na język ciśnie się pytanie: Jak oni to robią?

Chciałabym rozpocząć serię, która pokaże wam jak. Jak korzystać z zaawansowanych funkcji CSS. Zaczniemy prosto – od przejść. Czyli jak sprawić, żeby po najechaniu na div nie zmieniał on nagle koloru, ale robił to płynnie, w dodatku w określonym przez nas czasie.
W kolejnych odcinkach przyjrzymy się temu, jak dokonywać transformacji naszych obiektów, obracać je, wysuwać oraz zmieniać położenie, a także tworzeniu animacji w CSS i przycinaniu obiektów za pomocą SVG i clip-path.

Uwagi wstępne:

W poniższym tekście zapewne nieraz napotkacie bloki kodu i przykłady.

/*Blok kodu CSS wygląda tak:*/
.ex1 {
  width: 50px;
  height: 50px;
  background-color: red;
}

A przykład:

Kod pokazywany w blokach kodu będę wyświetlała poniżej właśnie jako przykłady. Możecie sprawdzić w Inspektorze, że powyższy czerwony kwadrat ma dokładnie taki sam styl jak kod.

Czasami też będą pojawiały się uwagi.

Na końcu postu umieszczam słowniczek z pojęciami, które mogą nie być do końca zrozumiałe. Jeśli chcecie coś do niego dodać, piszcie śmiało. Aby przenieść się do słowniczka, kliknijcie na podlinkowane pojęcie (jak u góry Inspektor).

Dobrze, to skoro wstęp mamy za sobą, możemy przejść… do przejść.

Przejścia – transitions

Weźmy znany nam już czerwony kwadrat. Oto jego kod w HTML:

<div class = "ex1"></div>

I w CSS:

.ex1 {
  width: 50px;
  height: 50px;
  background-color: red;
}

I wygląda on dokładnie tak, jak widzieliśmy w poprzednim akapicie:

Załóżmy, że chcielibyśmy, aby po najechaniu na nasz kwadrat zmienił on kolor na niebieski. Pamiętacie, jak robiło się to przy linkach? Otóż dodawało się pseudoklasę :hover.
I obecnie nasz kod CSS wygląda następująco:

.ex1 {
  width: 50px;
  height: 50px;
  background-color: red;
}
.ex1:hover {
  background-color: blue;
}

A oto kwadrat:

No i dobrze – po najechaniu na kwadrat kolor się zmienia. Ale zmiana następuje natychmiast. A gdyby przejście było płynne i trwało, dajmy na to, 2 sekundy? Wystarczy zmienić powyższy kod na następujący:

.ex1 {
  width: 50px;
  height: 50px;
  background-color: red;
  -webkit-transition: background-color 2s; /* bo Safari */
  transition: background-color 2s;
}
.ex1:hover {
  background-color: blue;
}

Działa pięknie, ale…

O co chodzi?

Za efekt płynnego przejścia odpowiada ta linijka: transition: background-color 2s;. W podstawowej wersji (jak wyżej) składa się z dwóch elementów:

transition: atrybut którego dotyczy przejście czas przejścia;

W przypadku naszego kwadratu przejście dotyczy zmiany koloru tła. No i ma trwać dwie sekundy. Oczywiście, opcji jest dużo więcej. Aby wszystkie Wam opisać, posłużę się dokumentacją.

Uwaga: Dokumentacja jest pewnego rodzaju podręcznikiem wydawanym przez tych którzy tworzą lub (jak w przypadku CSS i HTML) zarządzają standardem oprogramowania. Czasami może być niejasna, ale powinna być pierwszym źródłem (poza tutorialami i kursami), w którym szukamy odpowiedzi na nasze pytania czy rozwiania wątpliwości.

W przypadku transitions dokumentacja prezentuje nam działające przykłady, możliwe opcje oraz wsparcie dla przeglądarek. W ten sposób łatwo można odczytać, że nasz kwadrat nie zmieni płynnie koloru w IE6 i IE7, a dopiero w IE10. Ale czego się spodziewać po przeglądarce służącej do ściągania innych przeglądarek…

Wracając do tematu: pełna struktura transition wygląda następująco:

transition: transition-property transition-duration transition-timing-function transition-delay;

transition-property – to już wiemy. To się zmienia w trakcie przejścia.
transition-duration to też wiemy. To czas przejścia.
transition-timing-function – tutaj sprawa jest odrobinę skomplikowana. Mianowicie jest to funkcja czasu, która określa, jak ma wyglądać przejście, czyli czy ma być ze stałą prędkością, przyspieszyć/zwolnić na końcu, itp.
transition-delay
– a to opóżnienie. Czyli ile czasu od najechania minie, zanim przejście się zacznie.

Oczywiście, każdą z tych własności można rozpisać w osobnej linijce, co zobaczycie poniżej, w przykładach.

Inne przykłady

Pomęczmy jeszcze czerwony kwadrat, poddając go najróżniejszym torturom:

  • zmieńmy jego szerokość z opóźnieniem i całą resztą bajerów. I niech zwalnia na końcu:

    .ex1 {
      width: 50px;
      height: 50px;
      background-color: red;
      -webkit-transition: width 5s ease-out 1s; 
      transition: width 5s ease-out 1s;
    }
    .ex1:hover {
      width: 200px;
    }
  • …wysokość? Ale podzielmy na linijki i niech się zmienia cały czas z jednakową prędkością:

    .ex1 {
      width: 50px;
      height: 50px;
      background-color: red;
      -webkit-transition: width 5s ease-out 1s; /* Tutaj Safari albo Chrome. Możecie tak samo dzielić na linijki. O, tak BTW, jakby ktoś nie wiedział, tak w CSS wygląda komentarz. */
        transition-property: height;
        transition-duration: 2s;
        transition-timing-function: linear;
        transition-delay: 1s;
    }
    .ex1:hover {
      height: 200px;
    }
  • zaokrąglijmy brzegi i zróbmy kółko:

    .ex1 {
      width: 50px;
      height: 50px;
      background-color: red;
      -webkit-transition: border-radius 1s; 
      transition: border-radius 1s;
    }
    .ex1:hover {
      border-radius: 50%;
    }
  • dodajmy ramkę:

    .ex1 {
      width: 50px;
      height: 50px;
      background-color: red;
      -webkit-transition: border 1s; 
      transition: border 1s;
    }
    .ex1:hover {
      border: 5px solid blue;
    }
  • zwiększmy marginesy:

    .ex1 {
      width: 50px;
      height: 50px;
      background-color: red;
      -webkit-transition: margin 1s; 
      transition: margin 1s;
    }
    .ex1:hover {
      margin: 50px;
    }

Przy okazji ostatniego przykładu zachęcam was do zabawy w didżeja i poprzesuwania elementów na blogu 🙂

Podsumowanie

Post ten powstawał bardzo długo, bo prawie miesiąc. Długo myślałam nad tym, jak najlepiej ująć to, co chciałabym przekazać. Dla mnie CSS3 jest świetną zabawą – i mam nadzieję, że w trakcie tej serii będzie taką również dla Was. Poruszające się, kręcące i znikające elementy z minimalną (bądź żadną) ingerencją w JavaScript potrafią robić wrażenie.

Bardzo ważna jest dla mnie informacja zwrotna – czy Wam się podobało, co chcielibyście jeszcze zobaczyć, czy czegoś brakowało.

Miłej zabawy, pozdrawiam i do następnego!

Słowniczek

Inspektor – narzędzie służące do podglądania kodu na stronie www. W Firefoxie PPM (Prawy Przycisk Myszy) + „Zbadaj element”. W Chrome… prawie tak samo. Polecam się pobawić, sama jestem bez niego jak bez ręki.

Pseudoklasa :hover – służy do określania zachowania elementu po najechaniu na niego myszą.

Marginesy wewnętrze i zewnętrzne – w CSS istnieją 2 rodzaje marginesów: zewnętrzne (margin) i wewnętrzne (padding lub „zagnieżdżenie” lub masa innych określeń). Zewnętrzne, użyte w przykładzie, określają odległość brzegów obiektu od otaczających go obiektów. Wewnętrzne określają odległość  zawartości obiektu (np. tekst) od brzegów obiektu (i mogą powiększać obiekt). Zainteresowanych odsyłam do dokumentacji: tu i tu.

Poprzedni artykułFirefox? Nie mogę bez niego żyć!
Następny artykułIle masz już długopisów?
Avatar
Tak naprawdę nazywam się Aleksandra Bielak i obecnie nałogowo zamieniam kawę w kod. Pracuję jako korpo szczur taki trochę programista od wszystkiego. Lubię CSS, staram się zrozumieć asynchroniczność, moim ulubionym frameworkiem jest Vue.js. Ostatnio dłubię w chmurach, sorry za niespodziewane burze. Prywatnie jestem nerdem - gram w gry (Skyrim, Divinity Original Sin), czytam komiksy i marzę o tym, żeby mieć w przyszłości w na łóżku poduszki CTRL-ALT-DEL, a na ścianie wieszaki-shruikeny.
PODZIEL SIĘ