Z tego przewodnika dowiesz się, jak tworzyć skuteczne animacje CSS.
Aby poznać teorię stojącą za tymi zaleceniami, przeczytaj artykuł Dlaczego niektóre animacje są powolne?.
Zgodność z przeglądarką
Wszystkie właściwości CSS zalecane w tym przewodniku są dobrze obsługiwane w różnych przeglądarkach.
transform
opacity
will-change
Przenoszenie elementu
Aby przenieść element, użyj wartości słów kluczowych translate
lub rotation
we właściwości transform
.
Aby na przykład przesunąć element do widoku, użyj translate
.
.animate {
animation: slide-in 0.7s both;
}
@keyframes slide-in {
0% {
transform: translateY(-1000px);
}
100% {
transform: translateY(0);
}
}
Aby obracać elementy, użyj rotate
. W tym przykładzie element obraca się o 360°.
.animate {
animation: rotate 0.7s ease-in-out both;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
Zmienianie rozmiaru elementu
Aby zmienić rozmiar elementu, użyj wartości słowa kluczowego scale
we właściwości transform
.
.animate {
animation: scale 1.5s both;
}
@keyframes scale {
50% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
Zmiana widoczności elementu
Aby wyświetlić lub ukryć element, użyj opacity
.
.animate {
animation: opacity 2.5s both;
}
@keyframes opacity {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Unikaj właściwości, które powodują układ lub malowanie.
Zanim użyjesz dowolnej właściwości CSS do animacji (innej niż transform
i opacity
), określ wpływ tej właściwości na przetwarzanie.
Unikaj właściwości, które aktywują układ lub renderowanie, chyba że jest to absolutnie konieczne.
Wymuszanie tworzenia warstw
Jak wyjaśniliśmy w sekcji Dlaczego niektóre animacje działają wolno? Umieszczanie elementów w nowej warstwie umożliwia przeglądarce ponowne ich renderowanie bez konieczności ponownego malowania reszty układu.
Przeglądarki zwykle dobrze decydują, które elementy powinny zostać umieszczone na nowej warstwie, ale możesz ręcznie wymusić utworzenie warstwy za pomocą właściwości will-change
.
Jak sama nazwa wskazuje, właściwość ta informuje przeglądarkę, że dany element zostanie w jakiś sposób zmieniony.
W CSS możesz zastosować will-change
do dowolnego selektora:
body > .sidebar {
will-change: transform;
}
Specyfikacja sugeruje jednak, że należy to robić tylko w przypadku elementów, które zawsze ulegają zmianie. Może to dotyczyć np. paska bocznego, który użytkownik może przesuwać w górę i w dół. W przypadku elementów, które nie zmieniają się często, zalecamy zastosowanie funkcji will-change
za pomocą JavaScriptu, gdy nastąpi prawdopodobna zmiana. Daj przeglądarce wystarczająco dużo czasu na wprowadzenie niezbędnych optymalizacji i usuń tę właściwość po zatrzymaniu zmian.
Jeśli chcesz wymusić utworzenie warstwy w przeglądarce, która nie obsługuje will-change
(najprawdopodobniej Internet Explorer), możesz ustawić transform: translateZ(0)
.
Debugowanie wolno działających lub glitchy animacji
W Narzędziach deweloperskich w Chrome i Firefoksie znajdziesz wiele narzędzi, które pomogą Ci ustalić, dlaczego animacje są wolne lub się rozpraszają.
Sprawdzanie, czy animacja powoduje wyświetlenie układu
Animacja, która przesuwa element za pomocą innego parametru niż transform
, zwykle jest wolna. W tym przykładzie porównujemy animację z użyciem funkcji transform
z animacją z użyciem funkcji top
i left
.
.box { position: absolute; top: 10px; left: 10px; animation: move 3s ease infinite; } @keyframes move { 50% { top: calc(90vh - 160px); left: calc(90vw - 200px); } }
.box { position: absolute; top: 10px; left: 10px; animation: move 3s ease infinite; } @keyframes move { 50% { transform: translate(calc(90vw - 200px), calc(90vh - 160px)); } }
Możesz to przetestować w 2 przykładach Glitcha poniżej i zbadać wydajność za pomocą Narzędzi deweloperskich.
Narzędzia deweloperskie w Chrome
- Otwórz panel Skuteczność.
- Rejestruj wydajność środowiska wykonawczego podczas animacji.
- Sprawdź kartę Podsumowanie.
Jeśli na karcie Podsumowanie widzisz wartość inną niż 0 w kolumnie Renderowanie, może to oznaczać, że animacja powoduje, że przeglądarka musi przetwarzać układ.
Narzędzia deweloperskie w Firefox
W Narzędziach deweloperskich w Firefoksie ikona Waterfall zawiera informacje o tym, gdzie przeglądarka spędza czas.
- Otwórz panel Skuteczność.
- Zacznij rejestrować wydajność w trakcie animacji.
- Zatrzymaj nagrywanie i otwórz kartę Kaskada.
Jeśli widzisz wpisy dotyczące ponownie obliczania stylu, oznacza to, że przeglądarka musi wrócić na początek kaskady renderowania, aby wyrenderować animację.
Sprawdź, czy nie brakuje klatek.
- Otwórz kartę Renderowanie w Narzędziach deweloperskich w Chrome.
- Zaznacz pole wyboru Licznik FPS.
- Obserwuj wartości podczas odtwarzania animacji.
Zwróć uwagę na etykietę Klatki u góry interfejsu Licznik klatek na sekundę.
Pokazuje on wartości takie jak 50% 1 (938 m) dropped of 1878
. Animacja o wysokiej wydajności ma wysoki odsetek, np. 99%
, co oznacza, że niewiele klatek jest pomijanych, a animacja wygląda płynnie.
Sprawdzanie, czy animacja uruchamia wyrenderowanie
Niektóre właściwości są droższe w wyświetleniu przez przeglądarkę niż inne. Na przykład wszystko, co zawiera rozmycie (np. cień), trwa dłużej niż rysowanie czerwonej ramki. Różnice te nie zawsze są widoczne w CSS, ale Narzędzia deweloperskie w przeglądarce mogą pomóc w wykryciu obszarów wymagających ponownego wyrenderowania oraz w wykryciu innych problemów z wydajnością malowania.
Narzędzia deweloperskie w Chrome
- Otwórz kartę Renderowanie w Narzędziach deweloperskich w Chrome.
- Wybierz Błyskanie farby.
- Przesuwaj kursor po ekranie.
Jeśli cały ekran miga lub zaznaczone są obszary, które według Ciebie nie powinny się zmienić, przeanalizuj dokładniej.
Jeśli chcesz ustalić, czy dana usługa powoduje problemy z wydajnością związane z malowaniem, możesz użyć narzędzia do profilowania malowania dostępnego w Narzędziach deweloperskich w Chrome.
Narzędzia deweloperskie w Firefox
- Otwórz Ustawienia i dodaj do Toolboxu przycisk Włączanie i wyłączanie migania farby.
- Na stronie, którą chcesz sprawdzić, włącz tę funkcję i porusz myszką lub przewiń, aby zobaczyć wyróżnione obszary.
Podsumowanie
W miarę możliwości ograniczaj animacje do opacity
i transform
, aby zachować animacje na etapie komponowania ścieżki renderowania. Za pomocą Narzędzi deweloperskich sprawdź, na którym etapie ścieżki animacje działają nieprawidłowo.
Użyj narzędzia do profilowania operacji malowania, aby sprawdzić, czy operacje malowania są szczególnie kosztowne. Jeśli znajdziesz coś takiego, sprawdź, czy inna właściwość CSS zapewnia ten sam wygląd i działanie, ale lepszą wydajność.
Z usługi will-change
korzystaj z umiarem i tylko w przypadku problemów ze skutecznością.