Jak tworzyć skuteczne animacje CSS

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

Obsługa przeglądarek

  • Chrome: 36.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Źródło

opacity

Obsługa przeglądarek

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 2.

Źródło

will-change

Obsługa przeglądarek

  • Chrome: 36.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 9.1.

Źródło

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ż transformopacity), 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 topleft.

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.

Narzędzia deweloperskie w Chrome

  1. Otwórz panel Skuteczność.
  2. Rejestruj wydajność środowiska wykonawczego podczas 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.

Panel „Podsumowanie” pokazuje 37 ms na renderowanie i 79 ms na malowanie.
Przykład animation-with-top-left powoduje rozpoczęcie renderowania.
Panel Podsumowanie zawiera wartości zerowe dla renderowania i malowania.
Przykład animacji z transformacją nie powoduje renderowania.

Narzędzia deweloperskie w Firefox

W Narzędziach deweloperskich w Firefoksie ikona Waterfall zawiera informacje o tym, gdzie przeglądarka spędza 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 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.

  1. Otwórz kartę Renderowanie w Narzędziach deweloperskich w Chrome.
  2. Zaznacz pole wyboru Licznik FPS.
  3. 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.

Licznik klatek na sekundę pokazuje, że 50% klatek zostało utraconych
Przykład animacji z lewym górnym rogiem powoduje pominięcie 50% klatek.
Licznik klatek na sekundę pokazuje, że tylko 1% klatek zostało utraconych
Przykład animacji z transformacją powoduje pominięcie tylko 1% klatek.

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

  1. Otwórz kartę Renderowanie w Narzędziach deweloperskich w Chrome.
  2. Wybierz Błyskanie farby.
  3. Przesuwaj kursor po ekranie.
Element interfejsu wyróżniony na zielono, aby pokazać, że zostanie przemalowany
W tym przykładzie z Map Google możesz zobaczyć elementy, które zostały przemalowane.

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

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