Jak tworzyć skuteczne animacje CSS

Kayce Basques

Rachel Andrew

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

W sekcji Dlaczego niektóre animacje działają wolno?, teorię stojącą za tymi rekomendacjami.

Zgodność z przeglądarką

Wszystkie właściwości CSS zalecane w tym przewodniku mają dobrą .

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 słów kluczowych translate lub rotation w transform.

Aby na przykład wysunąć element w widoczny sposób, użyj elementu 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 przykładzie poniżej wykonano rotację elementu 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 w usłudze 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: kopiuj i wklej przykłady różnych animacji na stronie Animista.

Unikaj właściwości, które aktywują układ lub renderowanie

Zanim użyjesz na potrzeby animacji właściwości CSS (innej niż transform i opacity), określać wpływ usługi na potok renderowania, Unikaj właściwości, które aktywują 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 zapewnia płynności animacji ani wysokiej skuteczności.

Wymuś utworzenie warstwy

Jak wyjaśniliśmy w sekcji Dlaczego niektóre animacje działają wolno?, umieszczenie elementów w nowej warstwie pozwala przeglądarce ponownie je malować bez konieczności pomalować resztę układu.

Przeglądarki zwykle potrafią podejmować właściwe decyzje o tym, które elementy umieścić w nowej warstwy, ale możesz ręcznie wymusić jej utworzenie za pomocą polecenia will-change. Zgodnie z nazwą właściwość informuje przeglądarkę, że dany element zmienić w jakiś sposób.

Uwaga: ponieważ tworzenie warstw może powodować inne problemy z wydajnością, warto używać go na początku procesu optymalizacji. Zamiast tego używaj go tylko wtedy, gdy Zauważasz problemy z grafiką i uważasz, że przeniesienie elementu na nową warstwę może Ci w tym pomóc.

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

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

Specyfikacja sugeruje, że powinno się to robić tylko w przypadku elementów, które zawsze będą . Może to dotyczyć np. paska bocznego, który użytkownik może przesuwać, na zewnątrz. W przypadku elementów, które rzadko się zmieniają, zalecamy zastosowanie will-change używa JavaScriptu, gdy zmiana jest prawdopodobna. Upewnij się, że: Daj przeglądarce wystarczająco dużo czasu na wykonanie niezbędnych optymalizacji, a następnie usuń właściwości w momencie zatrzymania zmian.

Uwaga: więcej informacji i przykładów użycia will-change znajdziesz na stronie Wszystko, co musisz wiedzieć o usłudze CSS will-change.

Jeśli chcesz wymusić tworzenie warstwy w przeglądarce, która nie obsługuje will-change (najprawdopodobniej Internet Explorer), możesz ustawić transform: translateZ(0).

Debuguj wolne lub zacinające się animacje

W Narzędziach deweloperskich w Chrome i Firefoksie znajdziesz wiele narzędzi, dlaczego animacje są wolne lub płynne.

Sprawdzanie, czy animacja uruchamia układ

Animacja przesuwająca element za pomocą czegoś innego niż transform to będzie działać wolniej. W tym przykładzie porównano animację przy użyciu funkcji transform do animacji za pomocą elementów 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ć w tych 2 przykładach błędu: i sprawdzać skuteczność za pomocą Narzędzi deweloperskich.

• Przed –
• Po.

Narzędzia deweloperskie w Chrome

1. Otwórz panel Skuteczność.
2. Rejestrowanie wydajności środowiska wykonawczego w trakcie animacji.
3. Sprawdź kartę Podsumowanie.

Jeśli na karcie Podsumowanie w polu Renderowanie zobaczysz wartość inną niż 0, może to oznaczać, oznacza, że animacje działają na podstawie układu przeglądarki.

Element animation-with-top-left powoduje pracę nad renderowaniem.

.

.

animacja-with-transform nie powoduje renderowania.

Narzędzia deweloperskie w przeglądarce Firefox

W Narzędziach deweloperskich w Firefoksie atrybut Waterfall może pomóc w określeniu, na co użytkownik poświęca czas.

1. Otwórz panel Skuteczność.
2. Zacznij rejestrować wydajność w trakcie animacji.
3. Zatrzymaj nagrywanie i sprawdź kartę Waterfall (Kaskada).

Jeśli zobaczysz wpisy Ponownie oblicz styl, co oznacza, że przeglądarka musi wrócić do początku polecenia kaskada 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 FPS Meter (Miernik klatek na sekundę).
3. Obserwuj wartości podczas działania animacji.

Zwróć uwagę na etykietę Klatki u góry interfejsu Licznik klatek na sekundę. Pokazuje wartości takie jak 50% 1 (938 m) dropped of 1878. Wysoka wydajność animacja ma wysoki odsetek, np. 99%, co oznacza, że jest mało klatek gdy ją usuniesz, a animacja wygląda płynnie.

Element animation-with-top-left Powodem jest to, że 50% klatek jest usuwanych

.

animacja-z-przekształceniem powoduje porzucenie tylko 1% klatek.

Sprawdzanie, czy animacja uruchamia wyrenderowanie

Wyrenderowanie niektórych właściwości przez przeglądarkę jest droższe niż inne. Dla: wszystko, co jest rozmyte (np. cień), wydłuża niż rysowanie czerwonej ramki. Różnice te nie zawsze są oczywiste CSS, ale Narzędzia deweloperskie w przeglądarce mogą pomóc określić, które obszary jak i innych problemów z działaniem malowania.

Narzędzia deweloperskie w Chrome

1. Otwórz kartę Renderowanie w Narzędziach deweloperskich w Chrome.
2. Wybierz Migające farby.
3. Poruszaj wskaźnikiem po ekranie.

.

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

Jeśli cały ekran miga lub zaznaczono obszary, w których coś Ci się nie podoba powinien się zmienić, należy dokładniej zbadać sprawę.

Jeśli chcesz sprawdzić, czy określona usługa powoduje problemy z wydajnością malowania, narzędzie do profilowania lakierów w Narzędziach deweloperskich w Chrome.

Narzędzia deweloperskie w przeglądarce Firefox

1. Otwórz Ustawienia i dodaj przycisk Zestaw narzędzi dla Przełącz migawkę farby.
2. Na stronie, którą chcesz sprawdzić, włącz przełącznik i poruszaj myszą lub przewiń, by zobaczyć wyróżnione obszary.

Podsumowanie

W miarę możliwości ogranicz animacje do tych typów: opacity i transform, aby zachować na etapie komponowania ścieżki renderowania. Użyj Narzędzi deweloperskich, aby to sprawdzić etap ścieżki, na który mają wpływ animacje.

Za pomocą programu do profilowania malowania możesz sprawdzić, czy któreś z nich są szczególnie chronione. drogie. Jeśli znajdziesz cokolwiek, sprawdź, czy inna właściwość CSS zwraca taki sam wygląd i styl, ale przy większej wydajności.

Z usługi will-change korzystaj z umiarem i tylko w przypadku problemów ze skutecznością.