Przejścia

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 elementu class 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