CSS Transitions 101

Pomimo oczekiwanych przez ludzi zmian i ruchów na ekranie, CSS i HTML mają niewiele elementów sterujących, które pozwalają zaprojektować interaktywność, a te, które istnieją, są binarne.

Łącze jest albo w jednym kolorze, albo w innym. Pole tekstowe ma jeden rozmiar lub inny. Zdjęcie jest przezroczyste lub nieprzejrzyste. Bez pośredników z jednego stanu do drugiego. Brak przejść .

Doprowadziło to do tego, że większość stron internetowych czuje się nagle, a elementy zmieniają się nieprzyzwoicie.

Tak, możemy użyć DHTML i wykorzystać bibliotekę jQuery do przejść, ale wymaga to dużej ilości kodu, co powinno być bardzo proste.

Potrzebujemy szybkiego i łatwego sposobu dodawania prostych przejść do strony, aw tym artykule znajdziesz przydatne informacje o przejściach CSS i sposobach ich używania.

Kilka miesięcy temu wsunąłem stopę w usta sugerując, że projektanci powinni zacząć używać nowych technik CSS 3 które pozwalają im wykonać niektóre z podstawowych stylizacji, o które prosili. Jedyny problem: żaden z nich nie działał w Internet Explorerze. Nie, nawet IE8.

Niektórzy czytelnicy uważali, że sugerowanie technik, które około 75% widzów nie byłby w stanie zobaczyć, było nierozważne.

Do tych czytelników mówię: "Trzymajcie swoje kapelusze" , ponieważ zamierzam przedstawić wam inną nową właściwość CSS, która pozwala dodawać przejścia do dowolnego elementu za pomocą tylko kilku linii kodu.

Przejścia CSS są teraz wprowadzane na poziomie 3 CSS, ale zostały już dodane jako rozszerzenie do Webkita. Obecnie oznacza to, że działają tylko w przeglądarkach opartych na Webkit, w tym Apple Safari i Google Chrome.

Skąd pochodzą przejścia CSS

Przejścia były częścią Webkita przez pewien czas i są podstawą wielu fajnych rzeczy, które może zrobić interfejs użytkownika przeglądarki Safari, czego nie potrafią inne przeglądarki.

Ale grupa robocza W3C CSS oparła się dodawaniu przejść do jej oficjalnych specyfikacji, niektórzy członkowie argumentowali, że przejścia nie są właściwościami stylu i lepiej byłoby je obsługiwać za pomocą języka skryptowego.

Jednak wielu projektantów i programistów, włącznie ze mną, twierdziło, że są to w rzeczywistości style dynamiczne , a nie tradycyjne style statyczne, do których przywykło wielu z nas.

Na szczęście argument dynamicznych stylów utrzymywał ten dzień. W marcu przedstawiciele Apple i Mozilli zaczęli dodawać Moduł CSS Transitions do specyfikacji CSS Level 3 , ściśle wzorowane na tym, co Apple już dodał do Webkita.

Krótka uwaga o ulepszeniach projektu

Zanim przejdziemy dalej, chciałbym podkreślić jedną kwestię: nigdy nie polegać na stylach funkcjonalności strony internetowej, jeśli style nie są interoperacyjne z przeglądarką (tj. Dostępne we wszystkich popularnych przeglądarkach).

Jeszcze raz dla tych, którzy go przegapili: nigdy nie polegaj na stylach funkcjonalności strony internetowej, jeśli style nie są interoperacyjne z przeglądarką .

Powiedział, że możesz używać stylów, takich jak przejścia, jako ulepszenia projektu, aby poprawić wygodę użytkownika, bez poświęcania użyteczności dla tych, którzy ich nie widzą. Jest to w porządku, o ile w przeciwnym razie można byłoby żyć bez przejść, a użytkownicy nadal mogą wykonywać swoje zadania.

Najpierw kilka pomysłów na przejście

Przejścia CSS nie zastąpią wszystkich zastosowań DHTML, ale oto kilka sposobów na ulepszenie wyglądu w przeglądarkach obsługujących przejścia, bez niszczenia ich dla reszty odbiorców.

Musisz wyświetlić tę stronę w Apple Safari 3+ lub Google Chrome aby zobaczyć, jak działają te przejścia. Obie przeglądarki są dostępne w wersjach Mac i PC.

Roll-Overs

Najbardziej oczywistym zastosowaniem przejść jest podświetlanie elementów (linków, tabel, pól formularzy, przycisków lub innych elementów), gdy mysz nad nimi unosi się. Przejścia są doskonałym sposobem nadania stronie gładszego wyglądu.

Przykład 1

Menu rozwijane

Czyste menu CSS są łatwe do wykonania, a przejścia umożliwiają nadawanie menu zsuwaniem i podświetlaniem efektów.

Przykład # 2

Animacja

Możesz przesuwać obiekt między dwoma punktami na stronie i używać przejść do animowania jego ruchu.

Przykład # 3

Kliknij i przytrzymaj!

Przejścia, państwa i działania

Ale chwileczkę, Tex. Zanim zanurzymy się w przejściu, musimy zrozumieć różne stany, do których może przejść dany element.

Stany definiują sposób, w jaki dany element aktualnie współdziała z użytkownikiem lub stroną, i są one określone w CSS przy użyciu pseudoklasy. Na przykład, gdy użytkownik unosi się nad elementem, element ten będzie stylizowany na hover pseudo-klasa.

Przejścia działają, zmieniając styl w pewnym okresie czasu między różnymi stanami elementów. Na przykład wartość koloru domyślnego stanu elementu przejdzie przez pośrednie kolory w widmie, zanim pojawi się jako wartość koloru dla stanu zawisu.

Proste przejście

Rozważmy proste przejście z jednego koloru do drugiego, gdy użytkownik unosi się nad linkiem. Tak jak każda inna właściwość CSS, przejścia są dodawane bezpośrednio do selektora, do którego ma być zastosowana. Właściwość może następnie przyjąć jedną z następujących czterech wartości.

Właściwość CSS
Właściwość, która ma zostać zmieniona (na przykład kolor). Poniższa tabela zawiera listę wszystkich właściwości CSS, które można przenieść.

Trwanie
Jak długo potrwa przemiana, ogólnie w sekundach (na przykład .25s ).

Funkcja pomiaru czasu
Umożliwia kontrolowanie czasu trwania. Zamiast używać prostej liczby liniowej, możesz przyspieszyć lub zwolnić przejście, a nawet określić rytm lub liczbę (na przykład linear ). Więcej na ten temat w dalszej części artykułu.

Opóźnienie
Czas oczekiwania między akcją a początkiem przejścia, zwykle wyrażony w sekundach (na przykład .1s ). Tę wartość można pominąć, jeśli nie chcesz opóźnienia.

Ponieważ właściwość przejścia rozpoczęła się jako rozszerzenie Webkit, musimy uwzględnić oba transition i -webkit-transition właściwości dla kompatybilności wstecznej.

Najpierw dodajmy obie te właściwości do :hover pseudoklasa:

[css]
a: hover {
kolor czerwony;
-webkit-transition: kolor .25s liniowy;
przejście: kolor .25s liniowy;
}
[/ css]

Teraz, gdy link jest zawieszony, zamiast przeskakiwać z niebieskiego na czerwony, przejdzie on na kwadrans przez pośrednie kolory.

Oczywiście chcemy również wrócić do domyślnego koloru linku, więc dodamy przejście do :link (i prawdopodobnie :visited ) pseudoklasie, z bardzo krótkim opóźnieniem (jedna dziesiąta sekundy), zanim zniknie:

[css]
a: link, a: visited {
kolor niebieski;
-webkit-transition: kolor .25s liniowy .1s;
przejście: kolor .25s liniowy .1s;
}
[/ css]

Dodawanie wielu przejść

Ponieważ przejście jest właściwością CSS, jeśli dodasz wiele instancji właściwości przejścia w tej samej regule, to ostatnia zastąpi poprzednie, zamiast je dodać. Tak więc w poniższej zasadzie jedynym przejściem byłby kolor tła:

[css]
a: hover {
kolor czerwony;
kolor tła: rgb (235,235,185);
-webkit-transition: kolor .25s liniowy;
przejście: kolor .25s liniowy;
przejście: background-color .15s linear .1;
}
[/ css]

Wiele przejść jest dodawanych jako lista rozdzielana przecinkami w tej samej definicji właściwości przejścia:

[css]
a: hover {
kolor czerwony;
kolor tła: rgb (235,235,185);
-webkit-transition: kolor .25s liniowy, kolor tła .15s liniowy .1s;
przejście: kolor .25s liniowy, kolor tła .15 s liniowy .1s;
}
[/ css]

Spowoduje to zmianę koloru i przejścia tło-kolor.

Co można przenieść?

Niemal każda właściwość CSS, która ma składnik koloru, długości lub położenia, w tym wiele nowych właściwości CSS 3, może otrzymać przejście. Jednym z godnych uwagi wyjątków wydaje się być box-shadow.

Prosto ze specyfikacji W3C Transitions, tutaj znajduje się lista właściwości CSS, którym można nadać przejście, wraz z aspektami, które są transformowane. Podkreśliłem kilka bardziej użytecznych właściwości.

Czas przejścia i opóźnienie

Dzięki przejściom możesz zmieniać szybkość zliczania, odliczając wolniej na początku i przyspieszając na końcu, na odwrót lub cokolwiek pomiędzy. Przejścia CSS są dostarczane z pięcioma słowami kluczowymi do określania czasu przejścia i umożliwiają określenie wartości dla własnej krzywej czasowej.

Uniwersalne przejście?

Przejścia szybko staną się standardową procedurą operacyjną dla wszystkich stron internetowych, zwiększając reakcje interfejsu użytkownika.

Aby dodać wszechobecne przejścia w całej witrynie, jedną z opcji jest dodanie przejścia do uniwersalnego selektora, podobnego do resetowania CSS. Stosuje to domyślne przejście do wszystkich elementów na stronie, co pozwala zachować spójne przejście:

[css]
*: link, *: visited, *: hover, *: active, *: focus {
-webkit-transition:
kolor .25s liniowy,
kolor tła .25s liniowy,
border-color .25s linear;
przejście:
kolor .25s liniowy,
kolor tła .25s liniowy,
border-color .25s linear;
}
[/ css]

Jednym z argumentów przemawiających przeciwko powszechnej transformacji, a nawet przeciwko używaniu uniwersalnego selektora do resetowania CSS w ogóle, jest to, że zastosowanie stylu do każdego elementu na stronie może spowolnić renderowanie strony. Jednak nigdy nie znalazłem żadnych dowodów, że tak jest. Ktoś wie inaczej?

Jason Cranford Teague jest autorem ponad 13 książek na temat mediów cyfrowych, w tym Mówienie w stylach: Podstawy CSS dla projektantów stron internetowych . Aby uzyskać więcej informacji na temat CSS i typografii internetowej, sprawdź nową książkę Jasona, Fluid Web Typography . Śledź Jason na Twitterze: @jasonspeaking .

• ← Jak zaplanować brak JavaScript?
• 40 doskonałych stron internetowych wyświetlających ekspresję silnika →