Przejścia CSS3 pozwalają animować oryginalną wartość właściwości CSS do nowej wartości w czasie, kontrolując szybkość zmian wartości właściwości. Większość właściwości zmienia swoje wartości w 16 milisekund, więc zalecany domyślny czas przejścia to 200ms .

Zmiana właściwości następuje, gdy zachodzi pewne zdarzenie, które jest opisane przez odpowiednią pseudoklasę. Najczęściej używaną pseudoklasą jest:hover . Ta pseudo-klasa nie działa na urządzenia mobilne takich jak iPhone lub Android. Uniwersalnym rozwiązaniem, które sprawdza się w przeglądarkach stacjonarnych i mobilnych, byłaby obsługa zdarzeń za pomocą JavaScript (np. przełączanie klas po kliknięciu).

Przejścia dotyczą wszystkich elementów, a także pseudoelementów :before i :after. Aby ustawić wszystkie właściwości przejścia, właściwość przejścia jest zwykle skrócona.

Przejścia CSS3 mogą nie dotyczyć wszystkich właściwości i ich wartości. Szczegółowa lista znajduje się na stronie.

Tworzenie płynnych zmian we właściwościach elementu

Obsługa przeglądarki

TJ: 10.0
Firefox: 16,0, 4,0 -moz-
Chrom: 26,0, 4,0 -webkit-
safari: 6.1, 3.1 -webkit-
opera: 12,1, 11,6 -o-
Safari na iOS: 7.1
Opera Mini: —
Przeglądarka Androida: 4.4, 4.1 -webkit-
Chrome na Androida: 44

1. Nazwa właściwości przejściowa-właściwość

Zawiera nazwę właściwości CSS, do których zostanie zastosowany efekt przejścia. Wartość właściwości może zawierać pojedynczą właściwość lub listę właściwości oddzielonych przecinkami. Podczas tworzenia przejścia możesz użyć zarówno stanu początkowego, jak i końcowego elementu. Właściwość nie jest dziedziczona.

Tworzone efekty powinny być dyskretne. Nie wszystkie właściwości wymagają płynnej zmiany w czasie, co wiąże się z doświadczeniem użytkownika. Na przykład, gdy najedziemy kursorem na łącze, chcemy zobaczyć natychmiastową zmianę koloru łącza lub koloru i stylu podkreślenia. Dlatego przejścia powinny być używane dla tych właściwości, na które naprawdę musisz zwrócić uwagę.

Składnia

Div (szerokość: 100px; przejściowa właściwość: szerokość; ) div:hover (szerokość: 300px; )

2. Czas trwania przejścia – czas trwania przejścia

Określa czas, w którym powinno nastąpić przejście. Jeśli różne właściwości mają różne wartości przejścia, oddziela się je przecinkami. Jeśli czas trwania przejścia nie zostanie określony, animacja nie wystąpi podczas zmiany wartości właściwości. Właściwość nie jest dziedziczona.

Składnia

Div ( czas trwania przejścia: .2s; )

3. funkcja czasu przejścia

Właściwość określa funkcję czasu, która opisuje prędkość, z jaką obiekt przechodzi z jednej wartości do drugiej. Jeśli zdefiniujesz więcej niż jedno przejście dla elementu, na przykład kolor tła i położenie elementu, możesz użyć innej funkcji dla każdej właściwości. Właściwość nie jest dziedziczona.

funkcja czasu przejścia
Wartości:
łatwość	Funkcja domyślna, przejście zaczyna się powoli, przyspiesza szybko i zwalnia na końcu. Dopasowuje sześcienny-bezier(0.25.0.1,0.25,1) .
liniowy	Przejście zachodzi równomiernie przez cały czas, bez wahań prędkości. Dopasowuje sześcienny-bezier(0,0,1,1) .
łatwość	Przejście zaczyna się powoli, a na końcu stopniowo przyspiesza. Dopasowuje sześcienny-bezier (0,42,0,1,1) .
wyluzować	Przejście zaczyna się szybko i powoli zwalnia pod koniec. Odpowiada sześciennemu-bezierowi(0,0,0,58,1) .
wyluzować	Przejście zaczyna się powoli i powoli kończy. Dopasowuje sześcienny-bezier (0,42,0,0,58,1) .
sześciennybezier(x1, y1, x2, y2)	Pozwala ręcznie ustawić wartości od 0 do 1 dla krzywej przyspieszenia. możesz zbudować dowolną ścieżkę przejścia.
Inicjał	Ustawia wartość właściwości na jej wartość domyślną.
dziedziczyć	Dziedziczy wartość właściwości z elementu nadrzędnego.

Składnia

Div ( funkcja czasu przejścia: liniowa; )

Aby uzyskać bardziej realistyczne animacje, użyj funkcji sześciennej Béziera:

Ryż. 1. Niestandardowe funkcje sześcienne Beziera z easings.net

niestandardowa nazwa	Wartość funkcji
easyInSine	sześcienny-bezier (0,47, 0, 0,745, 0,715)
easyOutSine	sześcienny bezier (0,39, 0,575, 0,565, 1)
easyInOutSine	sześcienny-bezier (0,445, 0,05, 0,55, 0,95)
easyInQuad	sześcienny-bezier (0,55, 0,085, 0,68, 0,53)
easyOutQuad	sześcienny-bezier (0,25, 0,46, 0,45, 0,94)
easyInOutQuad	sześcienny-bezier (0,455, 0,03, 0,515, 0,955)
easyInCubic	sześcienny-bezier (0,55, 0,055, 0,675, 0,19)
easyOutCubic	sześcienny-bezier (0,215, 0,61, 0,355, 1)
łatwośćInOutCubic	sześcienny-beziera (0,645, 0,045, 0,355, 1)
easyInQuart	sześcienny-beziera (0,895, 0,03, 0,685, 0,22)
easyOutQuart	sześcienny-bezier (0,165, 0,84, 0,44, 1)
easyInOutQuart	sześcienny bezier (0,77, 0, 0,175, 1)
easyInQuint	sześcienny-bezier (0,755, 0,05, 0,855, 0,06)
easyOutQuint	sześcienny bezier (0,23, 1, 0,32, 1)
easyInOutQuint	sześcienny-bezier (0,86, 0, 0,07, 1)
easyInExpo	sześcienny-bezier (0,95, 0,05, 0,795, 0,035)
easyOutExpo	sześcienny-bezier (0,19, 1, 0,22, 1)
easyInOutExpo	sześcienny bezier(1, 0, 0, 1)
easyInCirc	sześcienny bezier (0,6, 0,04, 0,98, 0,335)
easyOutCirc	sześcienny-bezier (0,075, 0,82, 0,165, 1)
easyInOutCirc	sześcienny-bezier (0,785, 0,135, 0,15, 0,86)
easyInBack	sześcienny-bezier (0,6, -0,28, 0,735, 0,045)
easyOutBack	sześcienny-bezier (0,175, 0,885, 0,32, 1,275)
easyInOutBack	sześcienny-bezier (0,68, -0,55, 0,265, 1,55)

4. przejście-opóźnienie

Właściwość opcjonalna, która pozwala upewnić się, że zmiana właściwości nie nastąpi natychmiast, ale z pewnym opóźnieniem. Nie dziedziczone.

Składnia

Div ( opóźnienie przejścia: .5s; )

5. Podsumowanie przejścia

Wszystkie nieruchomości odpowiedzialne za zmianę wygląd zewnętrzny element, można połączyć w jedną właściwość przejścia
przejście: przejście-właściwość przejścia-czas trwania przejścia-timing-funkcja przejścia-opóźnienie;

Jeśli użyjemy wartości domyślnych, to wpis

Dz(przejście: 1s;)

będzie równoważne

Div (przejście: wszystkie jedynki łagodzą zera ;)

6. Płynne przejście kilku właściwości

Możesz określić kilka kolejnych przejść dla elementu, wymieniając je oddzielone przecinkami. Każde przejście można sformalizować za pomocą własnej funkcji czasu.

Div (przejście: tło 0.3s luz, kolor 0.2s linear;)

Div ( właściwość przejścia: wysokość, szerokość, kolor tła; czas trwania przejścia: 3 s; funkcja czasu przejścia: łatwość, łatwość, liniowa; )

7. Przykłady przejść dla różnych właściwości

Najedź myszką na bloki, aby zobaczyć właściwości w akcji.

CSS3 daje nam nową urodę i udogodnienia. W niektórych przypadkach nie trzeba już uciekać się do używania flasha i javascriptu, aby uzyskać nietypowy efekt. Właściwość przejścia CSS jest doskonałym przykładem jednej z takich sytuacji. Myślę, że wszyscy znają pseudo-klasę :hover. Z nim zmień wartości css właściwości elementu po najechaniu na niego myszą. Na przykład był szary blok z czarnym napisem, nad którym unosił się mysz, a on stał się czarny z białym napisem.

Oto jak to jest napisane:

Blok ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; ) .blok:hover ( background-color:# 000000; kolor:#ffffff; )

A oto jak to wygląda:

Wskaż na mnie

Możesz także zrobić blok, po najechaniu na niego, oprócz koloru tła i koloru tekstu, również zmienić szerokość. Aby to zrobić, napisz kod CSS w ten sposób:

Blok1 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; ) .blok1:hover ( background-color:# 000000; kolor:#ffffff;szerokość:355px; )

Oto jak by to wyglądało w tym przypadku:

Wskaż na mnie

Wszystko byłoby w porządku, ale jak widać właściwości zbyt gwałtownie zmieniają swoje wartości w tym samym momencie i nie wygląda to zbyt ładnie. Co robić? To bardzo proste: użyj właściwości Przejście CSS.

O właściwości przejścia

Właściwość przejścia sprawia, że ​​przejście z jednego stylu do drugiego jest płynne. Na przykład kolor klocka po najechaniu na niego myszą nie zmieni się nagle, ale po pewnym czasie. Nawiasem mówiąc, przejście przetłumaczone na język rosyjski oznacza „przejście”. Nieruchomość ma następujący wpis:

Div ( przejście: kolor 1s 1s liniowy; )

Oczywiście zamiast wskazanych wartości można użyć innych wartości. Większość przeglądarek nadal nie rozpoznaje tej właściwości w jej domyślnej formie, dlatego należy używać przedrostków.

Div ( przejście:color 1s 1s linear; -moz-transition:color 1s 1s linear; -webkit-transition:color 1s 1s linear; -o-transition:color 1s 1s linear; )

W przykładach wskazano krótką wersję zapisu, szczegółowa ma postać:

Div ( właściwość przejścia: kolor; czas trwania przejścia: 1 s; opóźnienie-przejścia: 1 s; funkcja czasu przejścia: liniowa; -moz-transition-property:kolor; -moz-transition-duration:1s; -moz-transition -delay:1s; -moz-transition-timing-function:linear; -webkit-transition-property:color; -webkit-transition-duration:1s; -webkit-transition-delay:1s; -webkit-transition-timing- function:linear; -o-transition-property:color; -o-transition-duration:1s; -o-transition-delay:1s; -o-transition-timing-function:linear; )

W nieruchomość przejściowa ustawia właściwość, do której zostanie zastosowana akcja przejścia. Na przykład: kolor, kolor tła, szerokość, wysokość, lewo, krycie, widoczność i wiele innych. Możesz określić wiele właściwości oddzielonych przecinkami. Jeśli chcesz zastosować przejście do wszystkich możliwych właściwości jednocześnie, ustaw właściwość przejścia na wszystkie. W okres przejściowy wskazać czas, w którym nastąpi przejście, w przejście-opóźnienie czas, po którym rozpocznie się przejście. Funkcja transit-timing-określa typ przejścia, przyjrzyjmy się tej właściwości bardziej szczegółowo.

Dowiedz się więcej o funkcji czasu przejścia

Nieruchomość funkcja czasu przejścia określa, jak zmienią się wartości pośrednie podczas przejścia, czyli jak zmieni się prędkość przejścia w czasie określonym we właściwości transition-duration. Na przykład przejście może rozpocząć się szybko, ale w końcu zwolnić lub nie zmieniać swojej prędkości przez cały czas. Funkcja czasu przejścia może mieć następujące wartości:

• liniowy — szybkość przejścia nie zmienia się od początku do końca. Odpowiednik sześciennego-beziera(0,0,1,1).
• luz - powolny start, potem przyspiesz i zwolnij na końcu. Odpowiednik sześciennego-beziera (0,25,0,1,0,25,1).
• luz - powolny start. Odpowiednik sześciennego-beziera (0,42,0,1,1).
• luz - zwolnij na końcu. Odpowiednik sześciennego-beziera(0,0,0,58,1).
• easy-in-out - powolny start i koniec. Odpowiednik sześciennego-beziera (0,42,0,0,58,1).
• sześcienny-bezier(n,n,n,n) - pozwala ustawić własne wartości od 0 do 1.

Najedź myszką na następny blok i przekonaj się, jak przebiega przejście z daną funkcją.

Jak widać, w zależności od tego, jaką wartość ma właściwość transition-timing-function, przejście można wykonać na zupełnie inne sposoby. Chociaż czasami ta różnica nie jest bardzo zauważalna, na przykład, jeśli czas trwania przejścia jest ustawiony na małą wartość tymczasową lub blok, dla którego wykonywany jest efekt, ma małe wymiary i tak dalej.

Przykłady użycia właściwości przejścia

Aby ułatwić Ci zrozumienie, jak prawidłowo używać właściwości przejścia, oto kilka przykładów. Zacznę być może od najprostszego. Pamiętasz klocek ze zmieniającą się szerokością i kolorem po najechaniu na niego na samym początku postu? Zróbmy teraz to samo, używając tylko właściwości przejścia.
Przykład 1

Primer_1 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:wszystkie 1s liniowe; -moz-transition: wszystkie 1s linear; -webkit-transition:wszystkie 1s linear; -o-transition:wszystkie 1s linear; ) .primer_1:hover ( background-color:#000000; color:#ffffff; width:355px; )

Wskaż na mnie

Użyty przykład funkcja liniowa, użyję go później w poście. Oczywiście możesz użyć absolutnie dowolnego. Właściwość przejścia została ustawiona na wszystkie, co oznacza, że ​​wszystkie możliwe właściwości, a mianowicie kolor tła, kolor tekstu i szerokość, zmieniły swoje wartości w tym samym czasie i przy użyciu tej samej funkcji. Aby każda właściwość zmieniała się inaczej, musisz napisać je oddzielone przecinkami z różne wartości. Lubię to:

Primer_1_1 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:background-color 1s linear, color 1s 1s luz na zewnątrz, szerokość 1s 2s luz; -moz-transition:background-color 1s linear, color 1s 1s easin-out, szerokość 1s 2s luz; -webkit-transition:background-color 1s linear, color 1s 1s -o-transition:background-color 1s linear, color 1s 1s easy-in-out, szerokość 1s 2s easy; ) .primer_1_1:hover ( background-color:#000000; color :#ffffff;szerokość:355px; )

Wskaż na mnie

W tym przypadku wszystkie właściwości zmieniały kolejno swoje wartości, zaczynając od koloru tła, a kończąc na szerokości. Każda nieruchomość ma swoją własną funkcję.
Przykład 2
Ustaliliśmy kolory i rozmiary. Teraz zróbmy klocek, który znika w ruchu.

Primer_2 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; kursor:pointer; text-align:center; opacity:1; transition:all 2s linear; - moz-transition:all 2s 0 linear; -webkit-transition:all 2s linear; -o-transition:all 2s linear; ) .primer_2:hover ( opacity:0; margin-left:50px; )

Wskaż na mnie

Z pomocą właściwości krycia a blok po lewej stronie przesuwa się i znika w ciągu dwóch sekund.
Przykład 3
Kolejny prosty przykład. Tym razem tekst ma biały cień, chociaż w tym przypadku wygląda bardziej jak podświetlenie niż cień, ale tak nazywa się właściwość.

Primer_3 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:text-shadow 1s linear; -moz- transition:text-shadow 1s 0 linear; -webkit-transition:text-shadow 1s linear; -o-transition:text-shadow 1s linear; ).primer_3:hover ( text-shadow:0 0 15px #ffffff; )

Wskaż na mnie

Zaimplementowaliśmy to za pomocą właściwości text-shadow.
Przykład 4
Skomplikujmy trochę zadanie, sprawmy, aby blok się kręcił.

Primer_4 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:transform 1.5s linear; -moz-transition :-moz-transform 1.5s 0 linear; -webkit-transition:-webkit-transform 1.5s linear; -o-transition:-o-transform 1.5s linear; ) .primer_4:hover ( transform: rotate(360deg); - moz-transform: obrót (360 stopni); -webkit-transform: obrót (360 stopni); -o-transform: obrót (360 stopni); )

Wskaż na mnie

Zgadzam się, wygląda dobrze i nawet nie zgadniesz od razu, że zostało to zrobione tylko z CSS. Nawiasem mówiąc, w tym przykładzie użyto innej nowej właściwości transformacji. Wiele przeglądarek odczytuje je tylko z prefiksami dostawcy. Zwróć uwagę, że muszą one być również określone w wartości właściwości przejścia. Koniecznie zasubskrybuj, aby dowiedzieć się więcej o właściwości transformacji. Niedługo zostanie jej poświęcony osobny artykuł, a także wiele innych właściwości.
Przykład 5
Nawiasem mówiąc, właściwość przejścia CSS działa dobrze w połączeniu z pseudoklasą :active. Zablokuj w ten przykład powinien wzrosnąć po kliknięciu i przytrzymaniu na nim kursora myszy. Sprawdźmy?

Primer_5 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding-top:18px; height:38px; cursor:pointer; text-align:center; przejście:wszystkie 2s liniowe; -moz-transition:wszystkie 2s 0 linear; -webkit-transition:wszystkie 2s linear; -o-transition:wszystkie 2s linear; ) .primer_5:active ( width:375px; height:85px; )

Nacisnij i przytrzymaj

Aby zaimplementować ten przykład, konieczne było jedynie zwiększenie wartości szerokości i wysokości w bloku za pomocą pseudoklasy :active.

Właściwie istnieje wiele sposobów wykorzystania właściwości przejścia CSS i jestem pewien, że w przyszłości będzie ich jeszcze więcej. Przyniosłem tylko najwięcej proste przykłady aby zademonstrować przejście w działaniu. Nawiasem mówiąc, linki na moim blogu zmieniają kolor, gdy najeżdżamy na nie myszką za jego pomocą. Myślę, że jestem już dość zmęczona szarym prostokątem, ale udało mi się idealnie pokazać wszystko, co chciałem. W połączeniu z innymi właściwościami i grafiką przejścia mogą robić całkiem fajne rzeczy. Próbować!

Właściwość przejścia CSS umożliwia ustawienie wszystkich właściwości efektu przejścia (przejścia między dwoma stanami elementu) w jednej deklaracji.

Ta właściwość jest skrótem dla następujących właściwości (lista jest zgodna z kolejnością określania wartości):

Obsługa przeglądarki

Nieruchomość			Opera		IExplorer	Brzeg
przemiana	26.0 4.0 -webkit-	16.0 4.0 -moz-	12.1 10.5 -o-	6.1 3.1 -webkit-	10.0	12.0

Składnia CSS:

przemiana: "Opóźnienie funkcji czasowej czasu trwania właściwości | początkowe | dziedziczone"; /* dozwolone jest wyszczególnienie efektu przejścia osobno dla każdej właściwości w jednej deklaracji */ /* składnia wyglądałaby następująco: property | czas trwania | funkcja czasowa | opóźnienie,..., nieruchomość | czas trwania | funkcja czasowa | delay */ /* nie wszystkie wartości są dozwolone, ale musisz postępować zgodnie z kolejnością pokazaną na górze przykładu */ /* zauważ, że jeśli chcesz określić tylko opóźnienie, musisz również określić czas trwania (0s) */ /* czyli . jeśli chcesz określić opóźnienie 4 sekundy, musisz napisać to przejście: 0s 4s; */ przemiana: szerokość 2s luz 100ms, wysokość 1s liniowa 2s, tło 0s 4s; /* Zobacz przykład na dole strony */

Składnia JavaScript:

Object.style.transition = "szerokość 3 s zwolnij 2 s"

Wartości nieruchomości

Oznaczający	Opis
nieruchomość przejściowa	Określa nazwę właściwości CSS, dla której ma być używany efekt przejścia. Wartość domyślna to wszystko.
okres przejściowy	Określa, ile sekund lub milisekund trwa efekt przejścia.
funkcja czasu przejścia	Służy do opisu sposobu obliczania wartości pośrednich Właściwości CSS, na który wpływa efekt przejścia, przy użyciu funkcji matematycznej (sześcienna krzywa Beziera). Zasadniczo pozwala to na utworzenie krzywej „przyspieszenia”, dzięki czemu prędkość przejścia może się zmieniać w czasie trwania efektu przejścia. Wartość domyślna to łatwość.
przejście-opóźnienie	Określa, kiedy rozpocznie się efekt przejścia (działa jako opóźnienie rozpoczęcia efektu). Wartość domyślna to 0 sekund.
	Ustawia właściwość na jej wartość domyślną.
	Określa, że ​​wartość jest dziedziczona z elementu nadrzędnego.

Wersja CSS

CSS3

Dziedziczny

Nie.

Ożywiony

Nie.

Przykład użycia

Przykład wyszukiwania przesuwnego w CSS przy użyciu selektora atrybutu (o określonej wartości) i ogólnej właściwości przejścia:

Szukaj:

Przejście to płynna zmiana właściwości elementu po najechaniu na niego kursorem myszy. W przypadku pseudoklasy :hover zmiana jest natychmiastowa, podczas gdy przejście pozwala ustawić czas trwania i metodę przejścia.

Zacznijmy od prostego przykładu. Mamy kilka obrazków, każde z nich powinno się obrócić o mały kąt, gdy najedziemy na nie kursorem (przykład 1).

Przykład 1: Stosowanie przejścia

Gdy tylko najedziemy kursorem na dowolny obraz, płynnie obraca się on o 15 stopni w lewo (rys. 1).

Ryż. 1. Płynna rotacja obrazu

W stylach dla :hover ustawiamy żądane zmiany w elementach po najechaniu. Samo przejście jest dodawane do stylów elementu poprzez właściwość przejścia. Ma cztery parametry - jedną lub więcej właściwości, czas trwania animacji, funkcję czasu i opóźnienie czasowe przed animacją.

Nieruchomości

Domyślnie wszystkie właściwości określone w :hover są animowane. Czasami niektóre nieruchomości wymagają animacji, a inne nie. W takim przypadku wszystkie żądane właściwości powinny być oddzielone przecinkami w przejściu .

Przejście: transformacja, granica 1s;

Czas trwania animacji

To czas, w którym ruch będzie trwał. Określane zarówno w sekundach (1s, 0,5s), jak i milisekundach (100ms).

Opóźnienie animacji

Ruch nie musi zaczynać się od razu, dopuszczalne jest dodanie niewielkiego opóźnienia na początku, po upływie określonego czasu animacja rozpocznie się natychmiast.

Funkcja czasu

Animacja może odbywać się na różne sposoby. Na przykład zacznij powoli na początku ruchu i przyspiesz na końcu lub odwrotnie. Istnieje wiele opcji i tworzą one wszystkie rodzaje ciekawe efekty. Szybkość animacji jest kontrolowana przez specjalną funkcję łączącą czas i ruch. Oto jak to wygląda na wykresie (ryc. 2).

Ryż. 2. Rodzaj funkcji czasu

Punkt początkowy ma współrzędne 0,0, 0,0, punkt końcowy - 1,0, 1,0, natomiast funkcja wzdłuż osi rzędnych może przekroczyć te wartości w górę lub w dół. W rezultacie będzie wyglądał tak, jakby element najpierw poruszał się w przeciwnym kierunku, a następnie w pożądanym kierunku. Możesz więc stworzyć efekt odbicia lub bezwładności. Oto najpopularniejsze wartości funkcji czasu.

• luz - animacja zaczyna się powoli, następnie przyspiesza i ponownie zwalnia pod koniec ruchu.
• luz - animacja zaczyna się powoli i przyspiesza pod koniec.
• luz - animacja zaczyna się szybko, zwalnia pod koniec.
• easy-in-out - animacja zaczyna się i kończy powoli.
• liniowa - ta sama prędkość od początku do końca.

W przykładzie 2 przejście służy do płynnego wysuwania panelu zza lewej krawędzi ekranu po najechaniu na niego kursorem myszy.

Przykład 2: Korzystanie z funkcji czasu

W tym przykładzie występuje wiele właściwości stylu, ale służą one wyłącznie do tworzenia pożądanego projektu. Animacja po najechaniu myszą odbywa się za pomocą dwóch właściwości - przejście ustawia parametry animacji, a left to właściwość, której wartość zmienia się płynnie w czasie (w tym przypadku w ciągu jednej sekundy). Początkowo lewy to -320px, a większość panelu jest ukryta za lewą krawędzią przeglądarki, widoczna jest tylko niewielka część. Wtedy lewy staje się zerem, a tym samym cały panel staje się widoczny.

W stylach dozwolone jest dodawanie kilku przejść na raz o różnych właściwościach i efektach, co pozwala urozmaicić przejścia. Przykład 3 pokazuje, jak utworzyć przycisk, który płynnie zmienia kolor tła, obramowanie i etykietę. W tym przypadku animacja tekstu różni się od animacji innych części.