Z tego posta dowiesz się, jak powstają niektóre popularne animacje znalezione w CodePen. Wszystkie te animacje korzystają z skutecznych technik omówionych 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 jest w całości oparta na 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
Gdy animacja jest aktywna, 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.
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. Aby znaleźć różne elementy animowane, możesz użyć panelu Animacje. Kliknięcie dowolnego elementu spowoduje jego wyróżnienie w DOM.
Wybierz na przykład trójkąt i zobacz, jak zmienia się jego pole podczas lotu, gdy się obraca, a następnie wraca do pozycji wyjściowej.
Gdy element jest nadal zaznaczony, spójrz na panel Stylów. Zobaczysz tam kod CSS, który rysuje kształt trójkąta, oraz używaną 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ół.
Zobaczysz, że animacja jest tworzona za pomocą transform, który służy do zmiany położenia i obracania elementu.
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 otrzymujemy płynnie działającą, złożoną animację.
Pulsujące kółko
Wyświetl pulsujący okrąg na 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 w przeglądarce 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.
W Firefox DevTools kliknij kółko, aby sprawdzić, 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 i ::after.
Element ::before tworzy nieprzezroczysty pierścień rozszerzający się poza białe koło, wykorzystując animację o nazwie pulse-ring, która animuje elementy transform: scale i opacity.
.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 sprawdzenia, które właściwości są animowane, jest wybranie panelu Animacje w Narzędziach deweloperskich Firefoksa. Zobaczysz wizualizację używanych animacji i ich właściwości.
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
Obejrzyj Pure CSS 3D Sphere na CodePen
Animacja wydaje się dość skomplikowana, ale wykorzystuje techniki omówione już w poprzednich przykładach. Złożoność animacji wynika z 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.
Te płaszczyzny i ramiona są w opakowaniu <div>,
i to właśnie 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 plane i spoke. Używają animacji, która zmienia ich rozmiar i położenie.
Powoduje to efekt pulsowania.
.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);
}
}
Utworzenie tej animacji wymaga odpowiedniego zgrania czasu, aby uzyskać efekt obracania się i migania. Same animacje są dość proste i wykorzystują metody, które działają bardzo dobrze.
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.