Jak tworzyć skuteczne animacje CSS

Kayce Basques

Rachel Andrew Technical Writer

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

Aby poznać teorię stojącą za tymi zaleceniami, przeczytaj artykuł 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 przez różne przeglądarki.

transform

Browser Support

• 36
• 12
• 16
• 9

Source

opacity

Browser Support

• 1
• 12
• 1
• 2

Source

will-change

Browser Support

• 36
• 79
• 36
• 9.1

Source

Przenoszenie elementu

Aby przesunąć element, użyj wartości słów kluczowych translate lub rotation właściwości transform.

Na przykład, aby 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);
  }
}

Użyj rotate, aby obrócić elementy. Ten przykład obraca element o 360 stopni.

.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 właściwości transform.

.animate {
  animation: scale 1.5s both;
}

@keyframes scale {
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

Zmienianie 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, które można skopiować i wkleić, znajdziesz na stronie Animista.

Unikaj właściwości, które powodują ponowne renderowanie układu lub strony

Zanim użyjesz jakiejkolwiek właściwości CSS do animacji (innej niż transform i opacity), określ jej wpływ na potok renderowania. Unikaj właściwości, które wywołują układ lub renderowanie, chyba że jest to absolutnie konieczne.

Ostrzeżenie: jeśli musisz użyć właściwości, która wyzwala układ lub renderowanie, prawdopodobnie nie uda Ci się zachować płynności ani wysokiej wydajności animacji.

Wymuś utworzenie warstwy

Jak wyjaśniono w artykule Dlaczego niektóre animacje działają wolno?, umieszczenie elementów na nowej warstwie pozwala przeglądarce na ich ponowne narysowanie 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 wymusić utworzenie warstwy ręcznie za pomocą właściwości will-change. Jak sugeruje nazwa, ta właściwość informuje przeglądarkę, że dany element zostanie w jakiś sposób zmieniony.

Ostrzeżenie: tworzenie warstw może powodować inne problemy z wydajnością, dlatego nie zalecamy korzystania z tej funkcji na wczesnym etapie procesu optymalizacji. Zamiast tego używaj go tylko wtedy, gdy zauważysz problemy z grafiką i uznasz, że przeniesienie elementu do nowej warstwy może pomóc.

W CSS możesz zastosować will-change do dowolnego selektora:

body > .sidebar {
  will-change: transform;
}

Jednak specyfikacja sugeruje, że należy dodawać tę właściwość tylko do elementów, które zawsze mają się zmienić. Można go na przykład użyć do utworzenia paska bocznego, który użytkownik może wysuwać i ukrywać. Jeśli element nie zmienia się często, zastosuj will-change za pomocą JavaScriptu, gdy zmiana jest prawdopodobna. Pamiętaj, aby dać przeglądarce wystarczająco dużo czasu na przeprowadzenie niezbędnych optymalizacji, i usuń właściwość, gdy zmiany zostaną zakończone.

Aby wymusić tworzenie warstwy w przeglądarce bez obsługi will-change, możesz ustawić transform: translateZ(0).

Debugowanie powolnych lub błędnych animacji

Narzędzia deweloperskie w Chrome i Narzędzia deweloperskie w Firefoksie mogą pomóc Ci dowiedzieć się, dlaczego animacje działają wolno lub nieprawidłowo.

Sprawdzanie, czy animacja aktywuje układ

Animacja, która przesuwa element za pomocą właściwości innej niż transform, prawdopodobnie będzie działać wolno. W poniższym przykładzie porównano animację wykorzystującą transform z animacją wykorzystującą 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ć na tych 2 przykładach i sprawdzić wydajność za pomocą Narzędzi deweloperskich.

• Przed, z animacją top i left.
• Po, z transform

Narzędzia deweloperskie w Chrome

1. Otwórz panel Wydajność.
2. Zarejestruj wydajność środowiska wykonawczego podczas odtwarzania animacji.
3. Sprawdź kartę Podsumowanie.

Jeśli na karcie Podsumowanie w polu Renderowanie widzisz wartość inną niż zero, może to oznaczać, że animacja wymusza na przeglądarce wykonywanie operacji związanych z układem.

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

Przykład animacji z przekształceniem nie powoduje renderowania.

Narzędzia deweloperskie w Firefoxie

W Narzędziach deweloperskich Firefoksa wodospad może pomóc Ci zrozumieć, na co przeglądarka poświęca czas.

1. Otwórz panel Wydajność.
2. Rozpocznij nagrywanie wydajności podczas odtwarzania animacji.
3. Zatrzymaj nagrywanie i sprawdź kartę Wodospad.

Jeśli widzisz wpisy Recalculate Style (Przelicz styl), oznacza to, że przeglądarka musi wrócić do początku wodospadu renderowania, aby wyrenderować animację.

Sprawdzanie, czy nie ma pominiętych 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 licznika FPS. Wyświetlane są wartości takie jak 50% 1 (938 m) dropped of 1878. Wydajna animacja ma wysoki odsetek, np. 99%, co oznacza, że pomijanych jest niewiele klatek, a animacja wygląda płynnie.

W przykładzie animation-with-top-left 50% klatek jest pomijanych.

W przykładzie animacji z transformacją pomijany jest tylko 1% klatek.

Sprawdzanie, czy animacja wywołuje renderowanie

Niektóre właściwości są bardziej kosztowne dla przeglądarki niż inne. Na przykład wszystko, co wymaga rozmycia (np. cień), zajmuje więcej czasu niż narysowanie czerwonego pola. Te różnice nie zawsze są widoczne w kodzie CSS, ale narzędzia deweloperskie w przeglądarce mogą pomóc w identyfikacji obszarów, które wymagają ponownego renderowania, oraz innych problemów z wydajnością związanych z renderowaniem.

Narzędzia deweloperskie w Chrome

1. Otwórz kartę Renderowanie w Narzędziach deweloperskich w Chrome.
2. Wybierz Migotanie renderowania.
3. Przesuń wskaźnik po ekranie.

W tym przykładzie z Map Google widać elementy, które są ponownie renderowane.

Jeśli miga cały ekran lub podświetlone są obszary, które Twoim zdaniem nie powinny się zmieniać, przyjrzyj się temu bliżej.

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

Narzędzia deweloperskie w Firefoxie

1. Otwórz Ustawienia i dodaj przycisk Przybornika Przełącz miganie renderowania.
2. Na stronie, którą chcesz sprawdzić, włącz przycisk i przesuń myszą lub przewiń, aby zobaczyć wyróżnione obszary.

Animowanie na etapie kompozycji

Jeśli to możliwe, ogranicz animacje do opacity i transform, aby utrzymać je na etapie kompozycji ścieżki renderowania. Użyj Narzędzi deweloperskich, aby sprawdzić, na który etap ścieżki wpływają animacje.

Użyj profilera renderowania, aby sprawdzić, czy jakieś operacje renderowania są szczególnie kosztowne. Jeśli coś znajdziesz, sprawdź, czy inna właściwość CSS nie daje takiego samego wyglądu i odczucia przy lepszej wydajności.

Używaj właściwości will-change oszczędnie i tylko wtedy, gdy wystąpi problem z wydajnością.