Podcast CSS – 044: przejścia
.
Podczas interakcji ze stroną internetową możesz zauważyć, że wiele elementów ma wartość state. Na przykład menu mogą być otwarte lub zamknięte. Po zaznaczeniu lub najechaniu kursorem przyciski mogą zmienić kolor. Okna modalne pojawiają się i znikają.
Domyślnie CSS natychmiast przełącza styl tych stanów.
Za pomocą przejść CSS można interpolować między stanem początkowym i docelowym elementu. Przejście między nimi poprawia wrażenia użytkownika, zapewniając wskazówki wizualne, wsparcie i wskazówki dotyczące przyczyny i efektu interakcji.
Właściwości przejścia
Aby użyć przejść w CSS, możesz użyć różnych właściwości przejść lub skróconej właściwości transition
.
usługa przejściowa
Właściwość transition-property
określa style, które mają zostać przeniesione.
.my-element {
transition-property: background-color;
}
transition-property
akceptuje co najmniej 1 nazwę właściwości CSS w postaci listy rozdzielanej przecinkami.
Opcjonalnie możesz użyć parametru transition-property: all
, aby wskazać, że każda usługa powinna zostać przeniesiona.
transition-duration
Właściwość transition-duration
określa czas potrzebny do ukończenia przejścia.
transition-duration
akceptuje jednostki czasu w sekundach (s
) lub w milisekundach (ms
). Domyślna wartość to 0s
.
transition-timing-function
Używaj właściwości transition-timing-function
, by zmieniać szybkość przejścia z arkuszy CSS w okresie transition-duration
.
Domyślnie CSS przenosi elementy ze stałą szybkością (transition-timing-function: linear
). Przejścia liniowe mogą jednak wyglądać trochę sztucznie: w rzeczywistości obiekty mają określoną wagę i nie mogą się zatrzymać i rozpocząć od razu. Równomierne rozpoczęcie lub zakończenie przejścia może sprawić, że przejścia będą bardziej żywe i naturalne.
Nasz moduł dotyczący animacji CSS zawiera obszerne omówienie funkcji czasowych.
Za pomocą DevTools możesz poeksperymentować z różnymi funkcjami synchronizacji w czasie rzeczywistym.
opóźnienie-przejścia
Użyj właściwości transition-delay
, aby określić czas rozpoczęcia przejścia. Jeśli wartość transition-duration
nie jest określona, przejścia będą uruchamiane natychmiast, ponieważ wartością domyślną jest 0s
. Ta właściwość akceptuje jednostkę czasu, np. sekundy (s
) lub milisekundy (ms
).
Ta właściwość jest przydatna w przypadku rozłożonych przejść, które osiągnięto dzięki ustawieniu dłuższego parametru transition-delay
dla każdego kolejnego elementu w grupie.
transition-delay
przydaje się też do debugowania. Ustawienie opóźnienia na wartość ujemną może rozpocząć przejście na dalszą część osi czasu.
skrót: przejście
Podobnie jak w przypadku większości właściwości CSS, dostępna jest wersja skrócona. transition
łączy elementy transition-property
, transition-duration
, transition-timing-function
i transition-delay
.
.longhand {
transition-property: transform;
transition-duration: 300ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.shorthand {
transition: transform 300ms ease-in-out 0s;
}
Co można, a czego nie można przenieść?
Pisząc CSS, możesz określić, które właściwości powinny mieć animowane przejścia. Zobacz tę listę animowanych właściwości CSS w MDN.
Ogólnie można przenosić tylko te elementy, które mogą mieć „stan pośredni”. między stanem początkowym i końcowym. Nie można na przykład dodać przejść do elementu font-family
, ponieważ nie wiadomo, co to jest „stan pośredni” od serif
do monospace
powinno wyglądać mniej więcej tak. Z drugiej strony w przypadku parametru font-size
można dodać przejścia, ponieważ jego jednostka to długość, która może być interpolowana.
Oto kilka typowych właściwości, które możesz przenieść.
Przekształć
Właściwość CSS transform
jest często przenoszona, ponieważ jest obsługiwana przez GPU, która zapewnia płynniejszą animację i zużywa mniej baterii. Ta właściwość pozwala dowolnie skalować, obracać, przesuwać i pochylać element.
Zapoznaj się z sekcją poświęconą przekształceniom w module Funkcje.
Kolor
Kolor może być świetnym wskaźnikiem stanu przed, w trakcie i po interakcji. Na przykład przycisk może zmienić kolor po najechaniu na niego kursorem. Dzięki takiej zmianie koloru użytkownik wie, że przycisk można kliknąć.
Właściwości color
, background-color
i border-color
to tylko kilka miejsc, w których kolor może
są przenoszone po interakcji.
Zapoznaj się z naszym modułem dotyczącym kolorów.
Cienie
Cienie są często przenoszone, by wskazać zmianę wysokości, np. efekt skupienia użytkownika.
Zapoznaj się z naszym modułem dotyczącym cieni.
Filtry
filter
to zaawansowana właściwość CSS, która pozwala na bieżąco dodawać efekty graficzne. Przejście między różnymi stanami filter
może przynieść całkiem niezwykłe efekty.
Zapoznaj się z naszym modułem dotyczącym filtrów.
Aktywatory przeniesienia
Usługa porównywania cen musi zawierać zmianę stanu oraz zdarzenie, które wywołuje zmianę stanu w celu aktywowania przejścia CSS. Typowym przykładem tego wyzwalacza jest pseudoklasa :hover
. Ta pseudoklasa dopasowuje się, gdy użytkownik najedzie kursorem na element.
Poniżej znajdziesz listę niektórych pseudoklas i zdarzeń, które mogą wywoływać zmiany stanu w elementach.
:hover
: dopasowuje się, jeśli kursor znajduje się na elemencie.:focus
: dopasowuje, jeśli element jest zaznaczony.:focus-within
: dopasowuje, jeśli element lub jego elementy podrzędne są skupieni.:target
: dopasowuje się, gdy fragment bieżącego adresu URL jest zgodny z identyfikatorem elementu.:active
: dopasowuje się, gdy element jest aktywny (zwykle wtedy, gdy tag przycisk myszy).class
zmiana w stosunku do JavaScriptu: gdy CSS elementuclass
zmienia się za pomocą JavaScript, CSS przeniesie odpowiednie właściwości, które uległy zmianie.
Różne przejścia przy wejściu lub wyjścia
Ustawiając różne właściwości elementu transition
po najechaniu kursorem myszy lub ustawianiu ostrości, można uzyskać ciekawe efekty.
.my-element {
background: red;
/* This transition is applied on the "exit" transition */
transition: background 2000ms ease-in;
}
.my-element:hover {
background: blue;
/* This transition is applied on the "enter" transition */
transition: background 150ms ease;
}
Ułatwienia dostępu
Przejścia CSS nie są przeznaczone dla każdego. U niektórych osób przejścia i animacje mogą powodować chorobę lokomocyjną lub dyskomfort. Na szczęście CSS ma funkcję multimediów o nazwie prefers-reduced-motion
, która wykrywa, czy użytkownik wolał ograniczyć ruch na urządzeniu.
/*
If the user has expressed their preference for
reduced motion, then don't use transitions.
*/
@media (prefers-reduced-motion: reduce) {
.my-element {
transition: none;
}
}
/*
If the browser understands the media query and the user
explicitly hasn't set a preference, then use transitions.
*/
@media (prefers-reduced-motion: no-preference) {
.my-element {
transition: transform 250ms ease;
}
}
Przeczytaj post na naszym blogu prefers-reduced-motion: Czasami mniej ruchu to więcej, aby dowiedzieć się więcej o tej funkcji multimediów.
Możliwe spowolnienie działania witryny
Podczas pracy z przejściami CSS możesz mieć problemy z wydajnością w przypadku dodania przejść dla określonych właściwości CSS. Gdy na przykład zmienią się właściwości takie jak width
czy height
, treść przenoszona jest do pozostałej części strony. Wymusza to CSS do obliczania nowych pozycji dla każdego elementu, którego dotyczy problem, w każdej klatce przejścia. Jeśli to możliwe, zalecamy używanie właściwości takich jak transform
i opacity
.
Więcej informacji znajdziesz w naszym przewodniku po wysokiej wydajności animacji CSS.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o procesach przenoszenia danych
Która właściwość przejścia służy do określania wygładzania?
transition-duration
transition-easing
animation-ease
transition-timing-function
transition-cubic-bezier
Sprawdzoną metodą jest użycie atrybutu transition-property: all
Wszystkie usługi można przenieść.