Jak tworzyć skuteczne animacje CSS

Kayce Basques

Rachel Andrew

Z tego przewodnika dowiesz się, jak tworzyć wydajne animacje CSS.

Teorię stojącą za tymi zaleceniami znajdziesz w artykule Dlaczego niektóre animacje działają wolno?.

Zgodność z przeglądarką

Wszystkie właściwości CSS zalecane w tym przewodniku są dobrze obsługiwane w różnych przeglądarkach.

transform

Obsługa przeglądarek

• 36
• 12
• 16
• 9

Źródło

opacity

Obsługa przeglądarek

• 1
• 12
• 1
• 2

Źródło

will-change

Obsługa przeglądarek

• 36
• 79
• 36
• 9,1

Źródło

Przenoszenie elementu

Aby przenieść element, użyj wartości translate lub rotation słowa kluczowego w przypadku 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;
  }
}

Uwaga: przykłady różnych animacji do skopiowania i wklejenia znajdziesz na stronie Animista.

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 wywołują układ lub malowanie, chyba że jest to absolutnie konieczne.

Ostrzeżenie: jeśli musisz użyć właściwości, która powoduje układ lub malowanie, prawdopodobnie nie będziesz w stanie zachować płynności animacji ani jej wysokiej wydajności.

Wymuszanie tworzenia warstw

Jak wyjaśniliśmy w artykule Dlaczego niektóre animacje są powolne?, umieszczenie elementów na nowej warstwie pozwala przeglądarce ponownie je rysować bez konieczności ponownego rysowania 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 sugeruje nazwa, ta właściwość informuje przeglądarkę, że element ma zostać w jakiś sposób zmieniony.

Uwaga: tworzenie warstw może powodować inne problemy z wydajnością, dlatego nie zalecamy korzystania z tego rozwiązania na wczesnym etapie procesu optymalizacji. Zamiast tego użyj go tylko wtedy, gdy zauważysz problemy z grafiką i uważasz, że przeniesienie elementu na nową warstwę może pomóc.

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. Pamiętaj, aby dać przeglądarce wystarczająco dużo czasu na przeprowadzenie niezbędnych optymalizacji, a gdy zmiany się zakończą, usunąć usługę.

Uwaga: więcej informacji i przykładów użycia właściwości will-change znajdziesz w artykule Wszystko, co musisz wiedzieć o właściwości will-change w usłudze porównywania cen.

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

Narzędzia deweloperskie Chrome i Firefox zawierają wiele narzędzi, które pomogą Ci ustalić, dlaczego animacje są powolne lub mają błędy.

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.

Nie

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     top: calc(90vh - 160px);
     left: calc(90vw - 200px);
  }
}

Tak

.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.

• Przed
• Po.

Narzędzia deweloperskie w Chrome

1. Otwórz panel Skuteczność.
2. Zarejestruj wydajność podczas działania animacji.
3. 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.

Przykład animation-with-top-left powoduje renderowanie.

Przykład animacji z transformacją nie powoduje renderowania.

Narzędzia deweloperskie w przeglądarce Firefox

W Firefox DevTools schemat kaskadowy może Ci pomóc zrozumieć, na co przeglądarka poświęca czas.

1. Otwórz panel Skuteczność.
2. Zacznij rejestrować wydajność w trakcie animacji.
3. Zatrzymaj nagrywanie i otwórz kartę Kaskada.

Jeśli widzisz wpisy Ponownie oblicz styl, przeglądarka musi wrócić do początku kaskady renderowania, aby wyrenderować animację.

Sprawdź, czy nie ma utraconych klatek

1. Otwórz kartę Renderowanie w Narzędziach deweloperskich w Chrome.
2. Zaznacz pole wyboru Licznik FPS.
3. Obserwuj wartości podczas działania animacji.

Zwróć uwagę na etykietę Klatki u góry interfejsu Miernika FPS. 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.

Przykład animacji z lewym górnym rogiem powoduje pominięcie 50% klatek.

Przykład animacji z transformacją powoduje pominięcie tylko 1% klatek.

Sprawdzanie, czy animacja powoduje wyświetlenie obrazu

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. Te różnice nie zawsze są oczywiste w CSS, ale narzędzia deweloperskie w przeglądarce mogą pomóc w określaniu obszarów, które wymagają ponownego narysowania, oraz innych problemów z wydajnością związanych z rysowaniem.

Narzędzia deweloperskie w Chrome

1. Otwórz kartę Renderowanie w Narzędziach deweloperskich w Chrome.
2. Wybierz Błyskanie farby.
3. Przesuwaj kursor po ekranie.

W tym przykładzie z Map Google możesz zobaczyć elementy, które zostały przemalowane.

Jeśli widzisz migający cały ekran lub zaznaczone obszary, które nie powinny się zmieniać, sprawdź, co się dzieje.

Jeśli chcesz sprawdzić, czy dana właściwość powoduje problemy z wydajnością związane z renderowaniem, możesz skorzystać z profilowania renderowania w Narzędziach deweloperskich Chrome.

Narzędzia deweloperskie w Firefox

1. Otwórz Ustawienia i dodaj do Toolboxu przycisk Włączanie i wyłączanie migania farby.
2. 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ą.