Przejścia: właściwość, czas trwania, funkcja czasowa
Proszę dodawać transition, aby płynnie animować zmiany właściwości CSS, dobierać odpowiedni czas trwania oraz wybierać funkcje łagodzenia, takie jak ease-in-out.
Przejścia: właściwość, czas trwania, funkcja czasowa to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Czym jest przejście CSS?
Przejście CSS animuje właściwość od jednej wartości do drugiej, gdy ta wartość się zmienia (po najechaniu kursorem, uzyskaniu fokusu albo przełączeniu klasy). Jest deklaratywne — określasz w CSS, które właściwości i w jaki sposób mają być animowane, a przeglądarka wykonuje resztę.
Podstawowa składnia
transition: property duration timing-function delay. Możesz podać wiele przejść, oddzielając je przecinkami.
.btn {
background: #6366f1;
transition: background-color 0.2s ease;
}
.btn:hover {
background: #4f46e5;
}
// Browser smoothly animates the colour changeWłaściwość
Określ, które właściwości mają być animowane przez przejście. Użyj all, aby animować każdą właściwość, którą można animować, ale może to wywołać niepożądane przejścia niezwiązane z daną zmianą. Dla lepszej wydajności i przewidywalności określaj właściwości jawnie.
.card {
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
opacity 0.15s linear;
}
/* Avoid 'all' in most cases */
.risky { transition: all 0.3s; }Czas trwania — jak długo
Czas trwania przejścia podaje się w s (sekundach) lub ms (milisekundach). Krótkie czasy trwania (100–200 ms) stosuj dla mikrointerakcji. Średnie (200–400 ms) dla zmian stanu komponentu. Dłuższe (400 ms i więcej) dla animacji na poziomie strony.
Funkcje czasowe — charakter animacji
Funkcje czasowe określają krzywą przyspieszenia. Typowe wartości to: ease (domyślnie: powolny początek, szybki środek i powolny koniec), linear (stała prędkość), ease-in (powolny początek), ease-out (powolny koniec), ease-in-out. Własne krzywe: cubic-bezier(x1, y1, x2, y2).
.btn { transition: transform 0.2s ease-out; }
.toast { transition: opacity 0.3s ease-in-out; }
/* Custom cubic-bezier from cubic-bezier.com: */
.spring { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }Opóźnienie — kiedy rozpocząć
Opóźnienie przejścia rozpoczyna animację po określonym czasie. Należy go używać do rozłożenia w czasie animacji wielu elementów albo zapobiegania przypadkowemu wyzwalaniu efektu hover przy szybkim poruszaniu myszą.
.dropdown-menu {
opacity: 0;
transition: opacity 0.2s ease 0.1s; /* 100ms delay */
}
.dropdown:hover .dropdown-menu {
opacity: 1;
}Zdarzenie transitionend
JavaScript może nasłuchiwać zakończenia przejścia za pomocą zdarzenia transitionend. Jest to przydatne do usuwania elementów po ich wygaszeniu albo uruchamiania kolejnego kroku sekwencji.
element.addEventListener('transitionend', (e) => {
if (e.propertyName === 'opacity' && element.style.opacity === '0') {
element.remove();
}
});Przekształcanie elementów
Właściwość transform wykorzystuje akcelerację GPU i idealnie nadaje się do przejść. Typowe przekształcenia to: translate(), scale(), rotate(), skew(). Animowanie transform i opacity uruchamia wyłącznie compositing — najszybszą ścieżkę renderowania.
.card {
transform: translateY(0) scale(1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}Co można animować?
Każdą właściwość o wartości liczbowej można płynnie animować: opacity, colour, transform, width, height, padding, border, font-size. Właściwości takie jak display i visibility nie przechodzą płynnie między stanami — zamiast tego do efektu pojawiania się i zanikania należy użyć opacity.
Praktyka: pojawianie się okna modalnego
Okno modalne pojawia się stopniowo i powiększa się, zaczynając od nieco mniejszego rozmiaru. Należy zastosować klasę .open za pomocą JavaScriptu; CSS obsłuży animację.
.modal {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.modal.open {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}Wydajność: używaj transform i opacity
Animowanie właściwości wywołujących układ (width, height, margin, top, left) jest kosztowne — przeglądarka przelicza układ w każdej klatce. W przypadku płynnych animacji 60 kl./s należy używać transform i opacity.
Szybkie sprawdzenie
Animowanie której właściwości CSS należy preferować, aby uzyskać najlepszą wydajność?
Powtórka: przejścia CSS
transition: property duration timing delay. Należy animować konkretne właściwości, a nie „all”. Wartości ease, ease-out i ease-in-out zapewniają naturalny ruch. Należy nasłuchiwać zdarzenia transitionend, aby łączyć kolejne działania. Dla lepszej wydajności należy używać transform i opacity. Do wyzwalania przejść należy używać przełączania klas w JS.
Często zadawane pytania
Czy lekcja „Przejścia: właściwość, czas trwania, funkcja czasowa” jest bezpłatna?
Tak — pełny tekst „Przejścia: właściwość, czas trwania, funkcja czasowa” 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Przejścia: właściwość, czas trwania, funkcja czasowa”?
Proszę dodawać transition, aby płynnie animować zmiany właściwości CSS, dobierać odpowiedni czas trwania oraz wybierać funkcje łagodzenia, takie jak ease-in-out. Ćwiczysz Frontend 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ąć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend 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 2 z 4.
Ile czasu zajmuje lekcja „Przejścia: właściwość, czas trwania, funkcja czasowa”?
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 Frontend Academy?
Tak. Każda lekcja Frontend 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
- Właściwości niestandardowe CSS: deklarowanie i aktualizowanie
- Przejścia: właściwość, czas trwania, funkcja czasowa
- Animacje @keyframes
- Respektowanie prefers-reduced-motion