CSS dla początkujących: transitions
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:
.ex1 { width: 50px; height: 50px; background-color: red; }
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:
I w CSS:
.ex1 { width: 50px; height: 50px; background-color: red; }
I wygląda on dokładnie tak, jak widzieliśmy w poprzednim akapicie:
.ex1 { width: 50px; height: 50px; background-color: red; }
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:
.ex1a { width: 50px; height: 50px; background-color: red; } .ex1a:hover { background-color: blue; }
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; }
.ex1b { width: 50px; height: 50px; background-color: red; transition: background-color 2s; } .ex1b: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; }
.ex1w { width: 50px; height: 50px; background-color: red; transition: width 5s ease-out 1s; } .ex1w: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; }
.ex1h { width: 50px; height: 50px; background-color: red; transition: height 2s linear 1s; } .ex1h: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%; }
.ex1r { width: 50px; height: 50px; background-color: red; transition: border-radius 1s; } .ex1r: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; }
.ex1br { width: 50px; height: 50px; background-color: red; transition: border 1s; } .ex1br: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; }
.ex1m { width: 50px; height: 50px; background-color: red; transition: margin 1s; } .ex1m: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.
Artykuł CSS dla początkujących: transitions pochodzi z serwisu BasementCode.