W wersji Firefoksa obecnie oznaczanej jako 3.7 pojawi się wsparcie dla efektów przejścia (ang. transitions
) w CSS. Czym są efekty przejścia? W momencie zmiany stanu danego elementu (np. zmiany pseudoklasy, jak :hover, albo zmiany stylu wywołanej np. z poziomu JavaScriptu) wskazane własności CSS zmienią swe wartości w sposób płynny, a nie skokowy.
CSS Transitions pojawiły się najpierw w silniku WebKit, a od niedawna obsługuje je także silnik Gecko 1.9.3. Apple zgłosiło specyfikację CSS Transitions do konsorcjum W3C; ma ona obecnie status „Working Draft” (wersji roboczej).
Jak to wygląda?
Tutaj znajdziecie prosty przykład (potrzebny jest testowy nightly-build Firefoksa z mozilla-central lub w miarę nowe Safari lub Chrome).
Jak tego używać?
Specyfikacja definiuje własności:
- transition-property
- określa, jaka własność stylu ma podlegać efektowi przejścia
- transition-duration
- określa, jak długo ma trwać ten efekt
- transition-timing-function
- określa przyspieszenie lub spowolnienie animacji
- transition-delay
- określa opóźnienie z jakim ma zacząć się efekt
- transition
- skrót dla wszystkich pozostałych własności
Omówmy je pokrótce.
transition-property
Podajemy tutaj, jaka własność (lub jakie własności) mają być animowane. Jeśli nie określimy tej własności, lub podamy tu słowo kluczowe all, animowane będą wszystkie własności CSS, które tylko da się animować. Wartość none wyłącza efekty przejścia.
Przykład:
transition-property: color;
transition-duration
Tutaj podajemy czas trwania przejścia.
Przykład:
transition-duration: 5s;
Ta animacja będzie trwała 5 sekund.
transition-timing-function
Własność ta pozwala animacji zwalniać lub przyspieszać w trakcie jej trwania. Do określenia tych zmian wykorzystywane są sześcienne krzywe Béziera.
Dopuszczalne wartości to cubic-bezier(x2, y2, x3, y3), gdzie x2 i y2 oraz x3 i y3 to odpowiednio współrzędne punktów kontrolnych P2 i P3 krzywej (punkty P0 i P1są ustalone jako (0, 0) i (1, 1)).
Kilka szczególnie przydatnych wartości uzyskało także wygodne do zapamiętania aliasy:
Słowo kluczowe | Odpowiednik cubic-bezier |
---|---|
ease | cubic-bezier(0.25, 0.1, 0.25, 1.0) |
linear | cubic-bezier(0.0, 0.0, 1.0, 1.0) |
ease-in | cubic-bezier(0.42, 0, 1.0, 1.0) |
ease-out | cubic-bezier(0, 0, 0.58, 1.0) |
ease-in-out | cubic-bezier(0.42, 0, 0.58, 1.0) |
Wartość linear oznacza po prostu liniową zmianę wartości, czyli tempo animacji będzie jednostajne. Pozostałe wartości z powyższej tabeli sprawiają, że animacja zwolni lub przyspieszy na początku lub na końcu.
Przykład:
transition-timing-function: linear;
transition-delay
Możemy tu podać opóźnienie, z jakim wykona się animacja. Wartość równa 0 oznacza brak opóźnienia. Dozwolone są również wartości ujemne (-x), wówczas animacja zacznie się natychmiast (tak, jak przy wartości 0), ale początkowa wartość animowanej własności będzie taka, jakby przejście trwało już od |x| sekund.
Przykład:
transition-delay: 0.5s;
transition
Własność transition to skrótowy zapis wszystkich pozostałych, w kolejności: property, duration, timing function, delay. Na przykład:
transition-property: color; transition-duration: 5s; transition-timing-function: ease-in; transition-delay: 2s;
można krótko zapisać jako:
transition: color 5s ease-in 2s;
Zarówno własności transition-* jak i skrótowa własność transition mogą przyjmować wiele wartości równolegle, tj. można
określić efekt przejścia np. dla własności color oraz dodatkowo inny dla width:
transition: color 5s ease-in 2s, width 3s ease-out 3s;
Jak zrobić div, który rozwinie się po najechaniu kursorem?
Bardzo prosto:
HTML:
<div id="slideDiv">witaj świecie!</div>
CSS:
#slideDiv { width: 5px; height: 20px; overflow: hidden; background: green; color: #fff; -moz-transition: width 1s linear; -webkit-transition: width 1s linear; } #slideDiv:hover { width: 20px; }
Ograniczenia obecnych implementacji
Specyfikacja jest dopiero w stadium roboczym, tak więc wszystko tutaj może się jeszcze zmienić. Zarówno Gecko, jak i WebKit implementują powyższe własności w tzw. przedrostkiem producenta. Oznacza to, że obecnie żaden kod z powyższych przykładów nie zadziała, dopóki nie poprzedzimy odpowiednim przedrostkiem wszystkich omawianych własności. Dla Gecko jest to -moz-, dla WebKitu: -webkit-.
Aby nasze przejścia obecnie działały w obu tych silnikach musimy niestety napisać je dwukrotnie (albo i potrójnie, jeśli chcemy zachować na przyszłość składnię bez przedrostków). W poniższym przykładzie odnośniki będą płynnie zmieniać swój kolor w ciągu pół sekundy od najechania na nie myszą:
a { color: #f00; -moz-transition: color 0.5s linear; -webkit-transition: color 0.5s linear; transition: color 0.5s linear; } a:hover { color: #0f0; }
W przypadku dostępu do tych własności z poziomu JavaScriptu należy pamiętać o tym, że minus przechodzi w powiększenie następującej po niej litery, tak więc
do własności efektów przejścia z poziomu JS na razie dobieramy się w Gecko przez element.style.MozTransition, a w WebKicie przez
element.style.WebkitTransition.
Nie wszystkie własności są obecnie animowane. Szerszy zakres ma na razie WebKit (obsługuje np. transformacje -webkit-transform; Gecko na dzień dzisiejszy nie pozwala na przejścia dla -moz-transform), ale wkrótce Mozilla powinna tutaj dogonić Apple. :)
Ważna sprawa: ani Gecko, ani WebKit nie animują przejść od wartości w rodzaju auto do wartości liczbowej. Zmiany tutaj odbywają się niestety skokowo.
Poprawna degradacja
Deklaracje własności transition w przeglądarkach nie obsługujących efektów przejścia (w tym obecne wersje Opery, IE, Firefox 3.6 i starsze, stare WebKity) nie powodują żadnych problemów, po prostu wymiary czy kolory elementów zmienią się w nich skokowo, tak jak bez transition.
Czy już to stosować?
Na poważnych witrynach najlepiej będzie się wstrzymać, przynajmniej do czasu względnego ustabilizowania się specyfikacji i jej implementacji.
Ale nikt nie broni dzisiaj poeksperymentować! :)
Linki
- artykuł w blogu Surfin’ Safari
- bug 435441 – śledzący implementację w Mozilli
- CSS Transitions w wiki.mozilla.org
Wiem, że ta notka trochę jest niefajnie sformatowana, niestety nie mam wpływu na kod CSS wordpress.com. :/
Wszystko jest ok. Wpis bardzo ciekawy, chciało by się aby efekty przejścia były już teraz obsługiwane, we wszystkim.
Ciekawe co się stanie gdy w połączeniu z wymiarowanym tłem (CSS3), dla dużego elementu, zaczniemy płynnie zmieniać jego wartości. Takie skalowanie może trochę obciążyć przeglądarkę…
Zbuduję przykład i postaram się podlinkować.
Pozdrawiam
Napisanie skryptu, który w IE doda odpowiednią funkcjonalność z pomocą jsquery lub innych podobnych bibliotek, nie powinno być trudne.
Oczywiście, że nie jest trudne. W MooTools jest na gotowo nawet. Kwestia jednak tego, aby nie musieć skryptować, tak trywialnych rzeczy jak płynna zmiana koloru tła.
Mozilla źle robi, wprowadzając takie elementy. Kiedyś Netscape vs. IE, dzisiaj Firefox vs. reszta świata. Super byłoby, gdyby w drodze porozumienia wprowadzali takie rzeczy do standardów, ale twórcy stron zaczną się skupiać na elementach CSS wyświetlanych tylko w Lisku, to będzie nędznie wyglądało na innych przeglądarkach.
@Lucider – w notce jest link do roboczej wersji specyfikacji CSS Transitions na stronach W3C. Implementacja Mozilli trzyma się tej specyfikacji (z tym że do czasu ustabilizowania specyfikacji nazwy własności poprzedzone są przedrostkiem -webkit- w WebKicie i -moz- w Gecko).
To coś zupełnie innego niż zabawy z czasów NSCP vs MSFT w rodzaju marquee czy doc.layers. :)
Dzisiaj swiatlo dzienne ujrzala Opera 10.5 ktora wspiera zarowno css transitions jak i transforms. Zachecam do sciagniecia, to naprawde swietna przegladarka.
(czy ja juz tego tu nie pisalem??)
Mama pytanie, dlaczego nie ma tam “-o-transition” dla Opery?
Bo w październiku 2009, kiedy ten artykuł był pisany, nie było żadnego -o-transition w Operze.
Dziękuję bardzo za tą informację. Bardzo się przydała. Efekty widać na stronie Pominiete.pl :)
Pozdrawiam i jeszcze raz dziękuję !
Dziękuję autorowi, te informacje z pewnością mi się przydadzą :)
Zastanawiam się jednak, czy może do tego czasu ustabilizowała się już specyfikacja i można swobodnie używać animacji.
Jaka jest prędkość renderowania przejść w CSS? Czy przy zastosowaniu wielu przejść na jednej stronie będą widoczne opóźnienia? Czy strona będzie się zacinała?
Witam, mam do Ciebie takie pytanie chce zrobić sobie taki slider za pomocą tego co napisałeś. Mam jednak pewien problem, otóż dla jednego diva to działa a dla innych zdjęc w tym divie nie działa.
Dla takiego kodu to działa w 100% ale jak dam dwa razy img to już nie działa, może jakiś błąd popełniam. Mógłbyś mi jakoś pomóc.