Czas trwania i harmonogram właściwości transition
Nauczy się Pan/Pani definiować, które właściwości mają być animowane, jak długo trwa przejście i kiedy się rozpoczyna, korzystając z opóźnienia.
Czas trwania i harmonogram właściwości transition to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 1 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.
Czym jest przejście CSS?
Przejście CSS interpoluje między dwiema wartościami właściwości przez określony czas, gdy wartość się zmienia, na przykład podczas najechania kursorem. JavaScript nie jest potrzebny.
transition-property
Określa, które właściwości CSS mają być animowane. Wartość all powoduje przejście wszystkich animowalnych właściwości, można też wymienić konkretne właściwości.
<button>Save changes</button>transition-duration
Określa czas trwania przejścia. Akceptuje wartości czasu wyrażone w sekundach (s) lub milisekundach (ms).
<div class="card">Card</div>Skrótowa właściwość transition
Łączy wszystkie cztery właściwości składowe przejścia: property | duration | timing-function | delay.
<button class="btn">Submit</button>Wiele przejść
Wiele przejść należy oddzielić przecinkami, aby niezależnie animować różne właściwości:
<div class="card">Card</div>transition-delay
Opóźnia rozpoczęcie przejścia. Przydaje się do sekwencjonowania animacji lub pozwala zakończyć jedno przejście przed rozpoczęciem kolejnego.
<nav>
<a class="nav-item" href="#">Home</a>
<a class="nav-item" href="#">About</a>
<a class="nav-item" href="#">Contact</a>
</nav>Przejście w stanie bazowym
Właściwość transition należy zawsze umieszczać w stanie bazowym, a nie w stanie :hover. Dzięki temu przejście działa zarówno przy najechaniu kursorem, jak i po jego opuszczeniu.
<button class="btn demo-active">Hover me</button>Co można animować za pomocą przejścia?
Większość numerycznych właściwości CSS można animować za pomocą przejść: kolory, wymiary, krycie, przekształcenia i inne. Właściwości dyskretne, takie jak display, nie mogą być płynnie interpolowane — zmieniają się skokowo.
Ostrzeżenie dotyczące transition: all
Użycie transition: all może powodować nieoczekiwane animacje właściwości, których nie zamierzają Państwo animować. W kodzie produkcyjnym należy zawsze jawnie określać właściwości.
Animowanie kolorów
Przejścia kolorów interpolują między wartościami. Aby uzyskać najlepsze rezultaty, należy używać tego samego formatu koloru:
<button class="btn demo-active">Hover me</button>Przejścia a wielokrotne przeliczanie układu
Ze względów wydajności należy unikać animowania właściwości wywołujących przeliczanie układu, takich jak width, height, margin i padding. Powodują one ponowne obliczanie układu w każdej klatce animacji. Zamiast nich należy używać transform i opacity.
Szybkie sprawdzenie
Gdzie należy umieścić właściwość transition, aby działała zarówno przy najechaniu kursorem, jak i po jego opuszczeniu?
Podsumowanie
Przejścia CSS płynnie rozkładają zmiany właściwości w czasie za pomocą właściwości transition-property, duration, timing-function i delay. Aby zapewnić animację w obu kierunkach, należy umieszczać przejścia w stanie bazowym. Ze względów wydajności i przewidywalności należy preferować listy konkretnych właściwości zamiast all.
Ucz się CSS dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 40
- Lekcje
- 159
Często zadawane pytania
Czy lekcja „Czas trwania i harmonogram właściwości transition” jest bezpłatna?
Tak — pełny tekst „Czas trwania i harmonogram właściwości transition” 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 „Czas trwania i harmonogram właściwości transition”?
Nauczy się Pan/Pani definiować, które właściwości mają być animowane, jak długo trwa przejście i kiedy się rozpoczyna, korzystając z opóźnienia. Ć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 1 z 4.
Ile czasu zajmuje lekcja „Czas trwania i harmonogram właściwości transition”?
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