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.
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.
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.
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.
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
i ::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: 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 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.
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.
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 plane
i spoke
. Używają animacji, która zmienia ich rozmiar i położenie.
Efektem jest pulsowanie.
.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.