Przykłady animacji CSS o wysokiej wydajności

Z tego posta dowiesz się, jak powstają niektóre popularne animacje znalezione w CodePen. Wszystkie te animacje wykorzystują techniki zapewniające skuteczność omówione w innych artykułach w tej sekcji.

Aby poznać teorię stojącą za tymi rekomendacjami, przeczytaj artykuł Dlaczego niektóre animacje są powolne?, a jeśli szukasz praktycznych wskazówek, zajrzyj do przewodnika po animacjach.

Animacja wczytywania kreatora

Animacja wczytywania kreatora na stronie CodePen

Ta animacja wczytywania została stworzona wyłącznie za pomocą CSS. Obraz i cała animacja zostały utworzone w CSS i HTML, a nie w JavaScript lub obrazach. Aby dowiedzieć się, jak została utworzona i jak działa, możesz skorzystać z Narzędzi deweloperskich w Chrome.

Sprawdzanie animacji za pomocą Narzędzi deweloperskich w Chrome

Podczas odtwarzania animacji otwórz kartę Wydajność w Narzędziach deweloperskich w Chrome i nagraj kilka sekund animacji. W sekcji Podsumowanie możesz zobaczyć, że podczas odtwarzania tej animacji przeglądarka nie wykonuje żadnych operacji związanych z układem ani rysowaniem.

Podsumowanie w Narzędziach deweloperskich
Podsumowanie po przeprowadzeniu profilowania animacji kreatora.

Aby dowiedzieć się, jak uzyskano tę animację bez konieczności zmiany układu i malowania, skontroluj dowolne ruchome elementy w Narzędziach deweloperskich w Chrome. Możesz użyć panelu Animacje, aby zlokalizować różne animowane elementy. Kliknięcie dowolnego elementu spowoduje jego podświetlenie w DOM.

Panel Animacje pokazujący różne części naszej animacji.
Wyświetlanie i wybieranie elementów w panelu animacji w Narzędziach deweloperskich w Chrome.

Na przykład wybierz trójkąt i obserwuj, jak ramka elementu zmienia się podczas podróży w górę, podczas obracania się, a następnie wraca do pozycji początkowej.

Video showing how we can track the path of the triangle in Chrome DevTools.

Gdy element jest nadal zaznaczony, spójrz na panel Stylów. Widać tam kod CSS, który rysuje kształt trójkąta, i zastosowaną animację.

Jak to działa

Trójkąt jest tworzony za pomocą pseudoelementu ::after, który dodaje wygenerowane treści, oraz obramowania, które tworzą kształt.

.triangle {
    position: absolute;
    bottom: -62px;
    left: -10px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
}

.triangle::after {
    content: "";
    position: absolute;
    top: 0;
    right: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 28px 48px 28px;
    border-color: transparent transparent #89beb3 transparent;
}

Animacja jest dodawana za pomocą tego wiersza kodu CSS:

animation: path_triangle 10s ease-in-out infinite;

Pozostań w Narzędziach deweloperskich w Chrome, aby znaleźć klatki kluczowe, przewijając panel stylów w dół. Animacja jest tworzona za pomocą parametru transform, który zmienia położenie elementu i jest obrócony. Właściwość transform to jedna z właściwości opisanych w przewodniku po animacjach, która nie powoduje wykonywania przez przeglądarkę operacji związanych z układem lub malowaniem (są one główną przyczyną wolno działających animacji).

@keyframes path_triangle {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-172px) translatex(10px) rotate(-10deg);
  }
  55% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  58% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  63% {
    transform: rotate(-360deg);
  }
}

Każda z ruchu części tej animacji korzysta z podobnych technik. W efekcie powstaje złożona animacja, która działa płynnie.

Pulsujące koło

Wyświetl pulsujący okrąg w CodePen

Ten typ animacji jest czasami używany do zwrócenia uwagi na coś na stronie. Aby zrozumieć animację, możesz użyć Narzędzi deweloperskich w Firefox.

Sprawdzanie animacji za pomocą Narzędzi deweloperskich Firefox

Podczas odtwarzania animacji otwórz kartę Wydajność w Firefox DevTools i nagraj kilka sekund animacji. Zatrzymaj nagrywanie. W diagramie kaskadowym nie powinno być żadnych wpisów dotyczących Ponownie oblicz styl. Wiesz już, że ta animacja nie powoduje ponownego obliczania stylu, a więc operacji układu i renderowania.

szczegóły animacji w kaskadowym źródle reklam w Firefox
Kaskada w Narzędziach deweloperskich w Firefoxie.

Pozostań w Narzędziach deweloperskich w Firefoksie i sprawdź okrąg, aby zobaczyć, jak działa ta animacja. Element <div> z klasą pulsating-circle wskazuje pozycję koła, ale nie rysuje go bezpośrednio.

.pulsating-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 30px;
    height: 30px;
}

Widzialne koło i animacja są uzyskiwane za pomocą pseudoelementów ::before::after.

Element ::before tworzy nieprzezroczysty pierścień, który rozszerza się poza biały okrąg, za pomocą animacji o nazwie pulse-ring, która animuje elementy transform: scaleopacity.

.pulsating-circle::before {
    content: '';
    position: relative;
    display: block;
    width: 300%;
    height: 300%;
    box-sizing: border-box;
    margin-left: -100%;
    margin-top: -100%;
    border-radius: 45px;
    background-color: #01a4e9;
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.33);
  }
  80%, 100% {
    opacity: 0;
  }
}

Innym sposobem na sprawdzenie, które właściwości są animowane, jest wybranie w Firefox DevTools panelu Animacje. Zobaczysz wizualizację używanych animacji oraz właściwości, które są animowane.

Gdy wybrany jest pseudoelement ::before, możemy zobaczyć, które właściwości są animowane.

Sam biały okrąg jest tworzony i animowany za pomocą pseudoelementu ::after. Animacja pulse-dot używa transform: scale, aby powiększać i pomniejszać kropkę podczas animacji.

.pulsating-circle::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}

Tego typu animację można wykorzystać w różnych miejscach w aplikacji. Ważne, aby te drobne elementy nie wpływały na ogólną wydajność aplikacji.

Czysta sfera 3D CSS

Wyświetlanie sfery 3D Pure CSS w CodePen

Animacja wydaje się dość skomplikowana, ale wykorzystuje techniki omówione już w poprzednich przykładach. Złożoność wynika z animowania dużej liczby elementów.

Otwórz Narzędzia deweloperskie w Chrome i wybierz jeden z elementów o klasie plane. Kula składa się z układu obracających się płaszczyzn i ramion.

Samolot się obraca.

Te płaszczyzny i promienie znajdują się wewnątrz otoki <div> i to ten element obraca się za pomocą transform: rotate3d.

.sphere-wrapper {
  transform-style: preserve-3d;
  width: 300px;
  height: 300px;
  position: relative;
  animation: rotate3d 10s linear infinite;
}

@keyframes rotate3d {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  25% {
    transform: rotate3d(1, 1, 1, 90deg);
  }
  50% {
    transform: rotate3d(1, 1, 1, 180deg);
  }
  75% {
    transform: rotate3d(1, 1, 1, 270deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

Kropki są zagnieżdżone w elementach planespoke. Używają animacji, która zmienia ich rozmiar i położenie. Efektem jest pulsowanie.

Punkt obraca się wraz ze sferą i pulsuje.
.spoke-15 .dot,
.spoke-21 .dot {
  animation: pulsate 0.5s infinite 0.83333333s alternate both;
  background-color: #55ffee;
}

@-webkit-keyframes pulsate {
  0% {
    transform: rotateX(90deg) scale(0.3) translateZ(20px);
  }
  100% {
    transform: rotateX(90deg) scale(1) translateZ(0px);
  }
}

Podczas tworzenia tej animacji należało dobrać odpowiedni czas, aby uzyskać efekt obracania i pulsowania. Same animacje są proste i wykorzystane z skutecznych metod.

Aby sprawdzić wydajność tej animacji, otwórz Narzędzia deweloperskie w Chrome i nagraj wydajność podczas jej odtwarzania. Po początkowym wczytaniu animacja nie powoduje wywołania układu ani malowania i działa płynnie.

Podsumowanie

Z tych przykładów możesz się dowiedzieć, jak za pomocą wydajnych metod animacji można tworzyć bardzo fajne animacje. Jeśli domyślnie używasz wydajnych metod opisanych w przewodniku po animacjach, możesz poświęcić czas na tworzenie efektu, którego oczekujesz, bez obaw o to, że strona będzie działać wolno.