Jak tworzyć skuteczne animacje CSS

Kayce Basques

Rachel Andrew

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

Więcej informacji o teorii stojącej za tymi rekomendacjami znajdziesz w artykule Dlaczego niektóre animacje działają wolno?.

Zgodność z przeglądarką

Wszystkie właściwości CSS, które zalecamy 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 przenieść element, użyj wartości słów kluczowych translate lub rotation 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);
  }
}

Użyj rotate, aby obracać elementy. W tym przykładzie element jest obracany 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żesz skopiować i wkleić, znajdziesz na stronie Animista.

Unikaj właściwości, które powodują zmianę układu lub malowanie

Zanim użyjesz dowolnej 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 powodują zmianę układu lub malowanie, chyba że jest to absolutnie konieczne.

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

Wymuszanie tworzenia warstw

Jak wyjaśniono w artykule Dlaczego niektóre animacje działają wolno?, umieszczenie elementów w nowej warstwie umożliwia przeglądarce ponowne renderowanie tych elementów bez konieczności ponownego renderowania reszty układu.

Przeglądarki zwykle podejmują dobre decyzje dotyczące tego, które elementy powinny być umieszczone w nowej warstwie, ale możesz ręcznie wymusić utworzenie warstwy za pomocą właściwości will-change. Jak sama nazwa wskazuje, ta właściwość informuje przeglądarkę, że ten element zostanie w jakiś sposób zmieniony.

Ostrzeżenie: tworzenie warstw może powodować inne problemy z wydajnością, dlatego nie zalecamy używania tej funkcji na wczesnym etapie procesu optymalizacji. Używaj tej opcji tylko wtedy, gdy zauważysz problemy z grafiką i uznasz, ż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 dodawać ten atrybut tylko do elementów, które zawsze mają się zmienić. Może to być na przykład pasek boczny, który użytkownik może wysuwać i chować. Jeśli element nie zmienia się często, zastosuj will-change za pomocą JavaScriptu, gdy prawdopodobne jest, że nastąpi zmiana. Zapewnij przeglądarce wystarczająco dużo czasu na przeprowadzenie niezbędnych optymalizacji i usuń usługę, gdy zmiana przestanie być potrzebna.

Aby wymusić utworzenie warstwy w przeglądarce, która nie obsługuje will-change, możesz ustawić transform: translateZ(0).

Debugowanie powolnych lub wadliwych animacji

Narzędzia deweloperskie w Chrome i Narzędzia deweloperskie w Firefoxie mogą pomóc Ci ustalić, dlaczego animacje działają wolno lub z błędami.

Sprawdzanie, czy animacja wywołuje układ

Animacja, która przesuwa element za pomocą czegoś innego niż transform, prawdopodobnie będzie powolna. W przykładzie poniżej porównano animację z użyciem transform z animacją z użyciem 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 sprawdzić na 2 przykładach poniżej i zbadać wydajność za pomocą Narzędzi deweloperskich.

• Wcześniej, z animacją top i left.
• Następnie użyj transform.

Narzędzia deweloperskie w Chrome

1. Otwórz panel Skuteczność.
2. Rejestruj wydajność w czasie działania podczas animacji.
3. Sprawdź kartę Podsumowanie.

Jeśli na karcie Podsumowanie widzisz niezerową wartość w przypadku Renderowania, może to oznaczać, że animacja powoduje, że przeglądarka wykonuje pracę związaną z układem.

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

Przykład animation-with-transform nie powoduje pracy renderowania.

Narzędzia deweloperskie w Firefoxie

W narzędziach deweloperskich Firefoxa wykres kaskadowy może pomóc Ci zrozumieć, na co przeglądarka poświęca czas.

1. Otwórz panel Skuteczność.
2. Rozpocznij rejestrowanie wydajności podczas animacji.
3. Zatrzymaj nagrywanie i sprawdź kartę Waterfall (Wykres kaskadowy).

Jeśli widzisz wpisy Recalculate Style, oznacza to, że przeglądarka musi wrócić na początek kaskady renderowania, aby wyrenderować animację.

Sprawdzanie utraconych 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 miernika FPS. Wyświetla 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 i animacja wygląda płynnie.

Przykład animation-with-top-left powoduje pominięcie 50% klatek.

Przykład animation-with-transform powoduje pominięcie tylko 1% klatek.

Sprawdzanie, czy animacja powoduje malowanie

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 CSS, ale narzędzia deweloperskie w przeglądarce mogą pomóc w określeniu, które obszary wymagają ponownego narysowania, a także w identyfikowaniu 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 Malowanie migające.
3. Przesuwaj wskaźnik po ekranie.

Na tym przykładzie z Map Google widać, jak elementy są ponownie rysowane.

Jeśli widzisz, że cały ekran miga lub są wyróżnione obszary, które Twoim zdaniem nie powinny się zmieniać, sprawdź to dokładniej.

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

Narzędzia deweloperskie w Firefoxie

1. Otwórz Ustawienia i dodaj przycisk przybornika do funkcji Włącz/wyłącz miganie farby.
2. Na stronie, którą chcesz sprawdzić, włącz przycisk i przesuwaj myszą lub przewijaj, aby zobaczyć wyróżnione obszary.

Animowanie na etapie kompozycji

W miarę możliwości ogranicz animacje do opacity i transform, aby zachować animacje na etapie kompozycji ścieżki renderowania. Użyj Narzędzi deweloperskich, aby sprawdzić, na którym etapie ścieżki animacje mają wpływ na działanie.

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

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