Z tego posta dowiesz się, jak powstały niektóre popularne animacje z CodePen. Wszystkie te animacje wykorzystują wydajne techniki omówione w innych artykułach w tej sekcji.
Aby poznać teorię stojącą za tymi zaleceniami, przeczytaj artykuł Dlaczego niektóre animacje działają wolno?, a praktyczne wskazówki znajdziesz w przewodniku po animacjach.
Animacja wczytywania kreatora
Wyświetlanie animacji ładowania kreatora w CodePen
Ta animacja ładowania została utworzona w całości za pomocą CSS. Obraz i cała animacja zostały utworzone w językach CSS i HTML, bez użycia obrazów i języka JavaScript. Aby dowiedzieć się, jak został utworzony i jak działa, możesz użyć Narzędzi deweloperskich w Chrome.
Sprawdzanie animacji za pomocą Narzędzi deweloperskich w Chrome
Gdy animacja jest uruchomiona, otwórz kartę Wydajność w Narzędziach deweloperskich w Chrome i nagraj kilka sekund animacji. W podsumowaniu powinno być widać, że podczas odtwarzania tej animacji przeglądarka nie wykonuje żadnych operacji związanych z układem ani renderowaniem.
Aby dowiedzieć się, jak udało się uzyskać tę animację bez wywoływania układu i malowania, sprawdź dowolny z ruchomych elementów w Narzędziach deweloperskich w Chrome. Możesz użyć panelu Animacje, aby znaleźć różne animowane elementy. Kliknięcie dowolnego elementu spowoduje jego podświetlenie w DOM.
Wybierz na przykład trójkąt i zobacz, jak pole elementu przekształca się podczas ruchu w górę, gdy się obraca, a następnie wraca do pozycji początkowej.
Gdy element jest nadal zaznaczony, spójrz na panel Style. Możesz tam zobaczyć 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 wygenerowaną treść,
a kształt jest tworzony za pomocą obramowań.
.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ą tej linii kodu CSS:
animation: path_triangle 10s ease-in-out infinite;
W Narzędziach deweloperskich w Chrome możesz znaleźć klatki kluczowe, przewijając panel Style w dół.
Zobaczysz, że animacja została utworzona za pomocą transform, aby zmienić pozycję elementu i go obrócić.
Właściwość transform jest jedną z właściwości opisanych w przewodniku po animacjach, które nie powodują, że przeglądarka wykonuje operacje układu lub renderowania (które są głównymi przyczynami powolnych 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 ruchomych części tej animacji wykorzystuje podobne techniki. Efektem jest złożona animacja, która działa płynnie.
Pulsujący okrąg
Wyświetl pulsujące kółko w CodePen
Ten rodzaj animacji jest czasami używany do zwrócenia uwagi na coś na stronie. Aby zrozumieć animację, możesz użyć Narzędzi deweloperskich Firefoksa.
Sprawdzanie animacji za pomocą Narzędzi deweloperskich w Firefoksie
Gdy animacja jest uruchomiona, otwórz kartę Wydajność w narzędziach deweloperskich Firefoksa i nagraj kilka sekund animacji. Zatrzymaj nagrywanie. W wodospadzie nie powinno być żadnych wpisów dotyczących ponownego obliczania stylu. Wiesz już, że ta animacja nie powoduje ponownego obliczania stylu, a tym samym operacji układu i malowania.
W narzędziach dla programistów Firefoksa sprawdź kółko, aby zobaczyć, jak działa ta animacja.
Element <div> z klasą pulsating-circle oznacza pozycję okręgu, ale nie rysuje go.
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: 30px;
}
Widoczne kółko i animacje są tworzone za pomocą pseudoelementów ::before i ::after.
Element ::before tworzy nieprzezroczysty pierścień, który rozciąga się poza białe koło, używając animacji o nazwie pulse-ring, która animuje 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 panelu Animacje w Narzędziach deweloperskich Firefoksa. Zobaczysz wizualizację używanych animacji i animowanych właściwości.
Białe kółko jest tworzone i animowane za pomocą pseudoelementu ::after.
Animacja pulse-dot używa transform: scale, aby powiększać i zmniejszać 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);
}
}
Taka animacja może być używana w różnych miejscach w aplikacji. Ważne jest, aby te drobne elementy nie wpływały na ogólną wydajność aplikacji.
Kula 3D w czystym CSS
Wyświetl sferę 3D w czystym CSS w CodePen
Ta animacja wydaje się niezwykle skomplikowana, ale wykorzystuje techniki, które widzieliśmy 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 z klasą plane.
Kula składa się z zestawu obracających się płaszczyzn i szprych.
Te płaszczyzny i promienie znajdują się w elemencie opakowującym <div>,
który 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.
Wykorzystują animację, która używa przekształcenia do ich skalowania i translacji.
W ten sposób powstaje 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);
}
}
Praca nad tą animacją polegała na odpowiednim ustawieniu czasu, aby uzyskać efekt obracania i pulsowania. Same animacje są dość proste i wykorzystują metody, które działają bardzo dobrze.
Możesz sprawdzić, jak działa ta animacja, otwierając Narzędzia deweloperskie w Chrome i rejestrując wydajność podczas jej działania. Po początkowym wczytaniu animacja nie wyzwala układu ani renderowania i działa płynnie.
Podsumowanie
Z tych przykładów widać, jak animowanie kilku właściwości za pomocą wydajnych metod może pozwolić na tworzenie bardzo ciekawych animacji. Jeśli domyślnie będziesz używać wydajnych metod opisanych w przewodniku po animacjach, możesz poświęcić czas na tworzenie pożądanego efektu, nie martwiąc się o spowolnienie strony.