Przejścia wielu właściwości
Nauczy się Pan/Pani stosować przejścia do wielu właściwości CSS jednocześnie, używając wartości rozdzielonych przecinkami.
Przejścia wielu właściwości to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Dlaczego używać przejść wielu właściwości?
Rzeczywiste interakcje interfejsu często obejmują jednoczesne zmiany kilku właściwości — koloru tła, cienia i skali podczas najechania kursorem. CSS obsługuje niezależne funkcje wygładzania i czasy trwania dla poszczególnych właściwości.
Przejścia oddzielone przecinkami
Wiele przejść należy wypisać po przecinku. Każdy wpis dotyczy niezależnie jednej właściwości:
<div class="card">Card</div>Różne czasy trwania właściwości
Każdej właściwości można nadać inną prędkość, aby uzyskać warstwowy i naturalny efekt:
<button class="btn">Hover-ready button</button>Różne funkcje wygładzania właściwości
Funkcje wygładzania można łączyć, aby każda właściwość zachowywała się odpowiednio:
<div class="modal">Modal content</div>Wady transition: all
Użycie transition: all oznacza, że każda zmieniająca się właściwość otrzyma ten sam sposób odmierzania czasu. Może to powodować niepożądane animacje właściwości, które powinny zmieniać się skokowo, takich jak display lub zmiany pozycji.
Przerywalne przejścia
Przejścia CSS można przerywać. Jeśli stan najechania kursorem zakończy się w trakcie przejścia, zostanie ono odwrócone od bieżącej animowanej wartości, a nie od stanu końcowego. Zapewnia to płynne odwrócenie bez gwałtownych przeskoków.
Koordynowanie wejścia i wyjścia
Różne czasy trwania dla najechania i opuszczenia kursorem można uzyskać przez nadpisanie przejść w stanie :hover:
<div class="card demo-active">Card</div>Efekt kaskadowy z opóźnieniem
Aby uzyskać kaskadowy efekt pojawiania się, należy dodawać coraz większe opóźnienia do sąsiednich elementów:
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>Właściwości niestandardowe CSS dla efektu kaskadowego
Opóźnienie efektu kaskadowego można przypisać za pomocą właściwości niestandardowej CSS ustawianej przez JavaScript lub HTML:
<div class="item">Item</div>Przejście a animacja
Przejść należy używać do zmian dwustanowych (bezczynność → najechanie kursorem). Animacji @keyframes należy używać do wielostopniowych sekwencji, zapętlonych efektów lub animacji uruchamiających się samoczynnie.
Optymalizacja z użyciem will-change
Właściwość ta informuje przeglądarkę, które właściwości będą animowane, aby umożliwić wcześniejszą optymalizację. Należy używać jej oszczędnie — zużywa pamięć GPU.
<div class="card">Card</div>Szybkie sprawdzenie
Karta ma w stanie bazowym właściwość transition: background 150ms, transform 250ms. Co się stanie, jeśli użytkownik szybko odsunie kursor w trakcie animacji?
Podsumowanie
Przejścia rozdzielone przecinkami pozwalają określić dla każdej właściwości osobny czas trwania, funkcję wygładzania i opóźnienie. Należy unikać transition: all — może ono animować niezamierzone właściwości. Przejścia można przerywać, a pozycja animacji płynnie zmienia kierunek od aktualnego miejsca. Opóźnienia służą do uzyskiwania efektów kaskadowych.
Często zadawane pytania
Czy lekcja „Przejścia wielu właściwości” jest bezpłatna?
Tak — pełny tekst „Przejścia wielu właściwości” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Przejścia wielu właściwości”?
Nauczy się Pan/Pani stosować przejścia do wielu właściwości CSS jednocześnie, używając wartości rozdzielonych przecinkami. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Przejścia wielu właściwości”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Czas trwania i harmonogram właściwości transition
- Funkcje easing: ease, linear, cubic-bezier
- Przejścia wielu właściwości
- Wydajność: właściwości transformowalne a ponowne renderowanie