Przejścia CSS i keyframes: 20 przykładów do skopiowania
Plac zabaw z przejściami CSS
Przejścia CSS i keyframes: 20 przykładów na żywo | We.Inc
Ustaw czas trwania, opóźnienie i easing suwakami, zobacz narysowaną krzywą cubic-bezier, porównaj przejścia z @keyframes i skopiuj 20 mikrointerakcji hover, które respektują ograniczenie ruchu.
Przejście CSS (transition) płynnie animuje właściwość, gdy zmienia się jej wartość, na przykład przy najechaniu kursorem: transition: transform 200ms ease-out. Wymaga stanu początkowego i końcowego i uruchamia się raz przy każdej zmianie. Animacje @keyframes definiują własne kroki, mogą się zapętlać i startują bez żadnej zmiany stanu. Animuj transform i opacity, aby uzyskać najpłynniejsze efekty.
transition, część po części
Część
Przykład
Domyślnie
transform, opacity
ease-out lub cubic-bezier(.2,.8,.2,1)
Plac zabaw animuje prawdziwy element między dwoma stanami z wybraną przez Ciebie właściwością, czasem trwania, opóźnieniem i easingiem, a easing rysuje jako krzywą, abyś zobaczył, dlaczego ease-out wydaje się żwawy, a ease-in ospały. Niżej znajdziesz dwadzieścia efektów hover i focus, które możesz edytować na żywo i wkleić na dowolną stronę.
Wybierz właściwość do animowania: ruch, skalę, obrót, kolor lub przezroczystość.
Ustaw czas trwania i opóźnienie suwakami, a następnie wybierz preset easingu lub przeciągnij cztery liczby krzywej Béziera.
Naciśnij Odtwórz, aby przełączać się między dwoma stanami, i obserwuj wynik obok jego krzywej.
Skopiuj linię transition, a potem weź dowolną z dwudziestu mikrointerakcji poniżej.
Reakcja interfejsu wydaje się natychmiastowa w przedziale od około 100 do 300 milisekund. Powyżej pół sekundy hover zaczyna sprawiać wrażenie powolnego.
Używaj ease-out dla elementów, które się pojawiają lub reagują na kursor, ease-in dla tych, które znikają, a ease-in-out dla elementów przemieszczających się z miejsca na miejsce.
Wymieniaj animowane właściwości zamiast pisać transition: all, aby żadna niezwiązana zmiana nie animowała się niespodziewanie.
Owiń ruch w sprawdzenie prefers-reduced-motion i zaproponuj spokojniejsze zanikanie lub brak animacji osobom, które proszą o mniej ruchu.
Najczęściej zadawane pytania
Jaka jest różnica między przejściem a animacją?
Przejście reaguje na zmianę wartości, na przykład dodanie klasy lub rozpoczęcie hover, i przechodzi tylko od starej wartości do nowej. Animacja używa @keyframes, może mieć wiele kroków, powtarzać się lub zmieniać kierunek i startuje, gdy tylko zostanie zastosowana. Używaj przejść do zmian stanu, a keyframes do loaderów i elementów przyciągających uwagę.
Dlaczego moje przejście się nie uruchamia?
Częste przyczyny: właściwości nie da się animować (display nie dało się, aż do allow-discrete), wartość początkowa to auto (height: auto nie da się interpolować bez nowszych funkcji), element został właśnie wstawiony, więc nie ma poprzedniego stylu, albo przejście zadeklarowano tylko w stanie hover, więc po zjechaniu kursorem element gwałtownie wraca.
Które właściwości tanio się animuje?
transform i opacity zwykle obsługuje kompozytor bez przeliczania układu i ponownego malowania, więc pozostają płynne. Animowanie width, height, top, left lub margin wymusza przeliczenie układu w każdej klatce, a box-shadow lub filter powodują ponowne malowanie, co może się zacinać na wolniejszych telefonach.
Co oznacza cubic-bezier?
Opisuje krzywą easingu za pomocą dwóch punktów kontrolnych, cubic-bezier(x1, y1, x2, y2). Wartości x to czas i muszą mieścić się między 0 a 1; wartości y to postęp i mogą wychodzić poza ten zakres, co tworzy przestrzelenie lub lekkie odbicie.
Jak respektować ograniczenie ruchu?
Użyj media query @media (prefers-reduced-motion: reduce), aby skrócić lub usunąć ruch. Prostym podejściem jest zachowanie zmian koloru i przezroczystości, ale rezygnacja z transformacji, albo ustawienie w tym zapytaniu transition-duration i animation-duration na bardzo małą wartość.
Jak czytać krzywą easingu
Pozioma oś krzywej easingu to czas, a pionowa to postęp. Stromy początek oznacza, że większość ruchu dzieje się wcześnie, i to dzięki temu ease-out daje wrażenie responsywności. Płaski początek oznacza, że element najpierw się waha, dlatego ease-in przy hover wydaje się opóźniony.
linear to prosta przekątna i przy ruchu wygląda mechanicznie, choć pasuje do spinnerów i cykli kolorów. steps(4) przeskakuje czterema równymi skokami zamiast płynąć, co przydaje się przy sprite sheetach lub efekcie pisania.
Przejście czy @keyframes?
Wybierz przejście, gdy są dwa stany, a zmianę wywołuje użytkownik: hover, focus, otwarcie, zaznaczenie. Przeglądarka sama wylicza klatki pośrednie, a nawet płynnie się cofa, jeśli stan zmieni się z powrotem w połowie.
Wybierz @keyframes, gdy ruch ma więcej niż dwa kroki, ma się zapętlać lub musi odtworzyć się sam po wczytaniu strony. animation-fill-mode: both utrzymuje pierwszą klatkę podczas opóźnienia, a ostatnią po zakończeniu, co zapobiega mignięciu.
Animowanie do i z display: none
Nowsze przeglądarki pozwalają, by display i overlay brały udział w przejściach, gdy dodasz transition-behavior: allow-discrete, a @starting-style nadaje elementowi styl, od którego ma się animować przy pierwszym renderowaniu. Razem umożliwiają płynne pojawianie się i znikanie popoverów i okien dialogowych bez skryptu.
Obsługa tych funkcji pojawiła się w latach 2023 i 2024 i w starszych wersjach jest nierówna, więc traktuj je jako ulepszenie: bez obsługi element po prostu natychmiast się pojawia i znika.
Przejście a @keyframes w skrócie
Kiedy czego używać
Animacja @keyframes
Startuje, gdy
Zmienia się wartość właściwości
Animacja zostaje zastosowana
Kroki
Tylko początek i koniec
Tyle, ile napiszesz
Powtarzanie
Nie
animation-iteration-count, w tym infinite
Płynnie cofa się w połowie
Tak
Tylko przy dodatkowej pracy
Najlepsze do
Stanów hover, focus, otwarcia i zaznaczenia
Loaderów, elementów przyciągających uwagę, efektów wejścia
Ile kosztuje animowanie każdej właściwości
Praca renderowania na klatkę (ogólna zasada, zależy od przeglądarki)
Właściwość
Układ
Malowanie
Tylko kompozycja
transform, opacity
Nie
Nie
Zwykle
color, background-color
Nie
Tak
Nie
box-shadow, filter
Nie
Tak
Nie
width, height, padding, margin
Tak
Tak
Nie
top, left (pozycjonowane)
Tak
Tak
Nie
Siatka bezpieczeństwa dla ograniczonego ruchu
Zachowuje zmiany stanu, ale usuwa przemieszczenie. Umieść ją pod koniec arkusza stylów.
Płynne pojawianie się i znikanie popovera z @starting-style
Ulepszenie dla przeglądarek obsługujących allow-discrete i @starting-style. Pozostałe pokazują i ukrywają element natychmiast.
20 mikrointerakcji do skopiowania
Najedź kursorem lub ustaw focus na każdym wyniku, aby zobaczyć efekt. Każdy fragment kończy się regułą dla ograniczonego ruchu.
Uniesienie karty
Unosi kartę i pogłębia jej cień.
Powiększenie przycisku
Lekkie powiększenie przy hover i wciśnięcie przy kliknięciu.
Wysuwane podkreślenie
Linia rośnie od lewej dzięki rozmiarowi tła.
Wypełnienie kolorem
Kolory tła i tekstu zamieniają się jednocześnie.
Przesunięcie strzałki
Ikona się przesuwa, a etykieta stoi w miejscu.
Obrót ikony
Plus zamienia się w krzyżyk.
Płynny pierścień focusu
Przesunięcie obrysu animuje się dla użytkowników klawiatury.
Zoom obrazu w ramce
Obraz się powiększa, ale ramka go przycina.
Odsłonięcie podpisu
Podpis wysuwa się w górę od dolnej krawędzi.
Delikatna poświata
Pojawia się kolorowy cień.
Subtelne przechylenie
Kilka stopni obrotu sprawia, że naklejka wygląda swobodnie.
Rysowanie obramowania
Kolor obramowania zmienia się z szarego na niebieski marki.
Przyciemnienie pozostałych
Najechanie na jeden element wygasza jego sąsiadów.
Przebłysk światła
Jasny pas przesuwa się po elemencie przy hover.
Suwak przełącznika
Checkbox ostylowany jako przełącznik z przesuwanym suwakiem.
Strzałka akordeonu
Znacznik obraca się, gdy element details się otwiera.
Pulsująca kropka (keyframes)
Zapętlona kropka statusu zbudowana z @keyframes.
Spinner (keyframes)
Liniowe tempo utrzymuje równomierny obrót.
Pojawienie się od dołu przy wczytaniu (keyframes)
fill-mode both ukrywa element podczas opóźnienia.
Potrząśnięcie przy błędzie (keyframes)
Krótkie poziome potrząśnięcie, które tutaj odtwarza się raz przy hover.
Krzywa easingu cubic-bezier({values})
Plac zabaw z przejściami
Odtwórz do przodu
Odtwórz wstecz
Twoje urządzenie prosi o ograniczenie ruchu, więc podgląd przeskakuje zamiast się przesuwać.