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ę, przeczytaj artykuł Dlaczego niektóre animacje są spowolnione? oraz w Przewodniku dotyczącym animacji znajdziesz praktyczne wskazówki.
Animacja wczytywania kreatora
Wyświetl animację wczytywania kreatora w CodePen
Ta animacja wczytywania jest w całości oparta na CSS. Obraz i cała animacja zostały utworzone w kodach CSS i HTML, bez obrazów ani JavaScriptu. Aby dowiedzieć się, jak został utworzony 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 podsumowaniu powinno być widoczne, że podczas uruchamiania tej animacji przeglądarka nie wykonuje żadnych operacji renderowania ani renderowania.
Aby dowiedzieć się, w jaki sposób animacja została wygenerowana bez konieczności zmiany układu i wyrenderowania, sprawdzić ruchome elementy w Narzędziach deweloperskich w Chrome. W panelu Animacje możesz znaleźć różne animowane elementy. podświetlenie dowolnego elementu w DOM.
Na przykład wybierz trójkąt, i zobaczysz, jak pudełko, w którym znajduje się pierwiastek, zmienia się w powietrzu, podczas obrotu, po czym wraca do pozycji początkowej.
Gdy element będzie nadal zaznaczony, przejdź do panelu Style. Widać tam narzędzie CSS, które rysuje kształt trójkąta, i zastosowaną animację.
Jak to działa
Trójkąt tworzy się za pomocą pseudoelementu ::after, aby dodać wygenerowaną treść.
przy użyciu obramowań, aby utworzyć 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;
}
Do animacji dodaje się następujący wiersz 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 jest jedną z właściwości opisanych w Przewodniku po animacji,
który nie powoduje wykonywania przez przeglądarkę operacji układu ani renderowania (co jest główną przyczyną 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 animacji wykorzystuje podobne techniki. 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 czasami ma zwrócić uwagę na coś na stronie. Aby zrozumieć animację, możesz skorzystać z Narzędzi deweloperskich w Firefoksie.
Sprawdzanie animacji za pomocą Narzędzi deweloperskich w przeglądarce Firefox
Po uruchomieniu animacji otwórz kartę Performance (Wydajność) w Narzędziach deweloperskich w Firefoksie i nagraj kilka sekund animacji. Zatrzymaj nagrywanie, w kaskadzie nie powinno być żadnych pozycji Ponownie oblicz styl. Wiesz już, że animacja nie powoduje ponownego obliczania stylu, a co za tym idzie – także operacji układu i malowania.
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 położenie okręgu,
nie rysuje jednak okręgu.
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: 30px;
}
Widoczne koło i animacje są tworzone za pomocą pseudoelementów ::before i ::after.
Element ::before tworzy nieprzezroczysty pierścień, który rozszerza się poza białe koło,
za pomocą animacji o nazwie pulse-ring,
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 sprawdzenia, które właściwości są animowane, jest wybranie panelu Animacje w Narzędziach deweloperskich Firefoksa. Zobaczysz wizualizację użytych animacji. oraz właściwości, które są animowane.
Biały okrąg jest tworzony i animowany za pomocą pseudoelementu ::after.
Animacja pulse-dot wykorzystuje parametr transform: scale, by zwiększać lub 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);
}
}
Tego typu animacje można wykorzystać w różnych miejscach w aplikacji, Ważne jest, aby te drobne elementy nie miały wpływu na ogólną wydajność aplikacji.
Czysta sfera 3D CSS
Wyświetlanie obszaru Pure CSS 3D w CodePen
Ta animacja wydaje się dość skomplikowana, jednak wykorzystuje techniki, które omówiliśmy 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 z klasą plane.
Sfera składa się z obracających się płaszczyzn i promieni.
Te samoloty 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 znajdują się zagnieżdżone w elementach plane i spoke,
Wykorzystują animację wykorzystującą przekształcenie, aby skalować i tłumaczyć tekst.
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);
}
}
Stworzenie animacji wymaga odpowiedniego zgrania czasu, aby uzyskać efekt obracania się i migania. Same animacje są dość proste, i używać bardzo skutecznych metod.
Aby sprawdzić skuteczność tej animacji, otwórz Narzędzia deweloperskie w Chrome i zapisz wydajność podczas jej działania. Po wstępnym wczytaniu animacja nie aktywuje opcji Układ ani Renderowanie. i działa płynnie.
Podsumowanie
Na podstawie tych przykładów możesz zobaczyć, jak animowanie kilku właściwości za pomocą metod efektywnych może stworzyć bardzo fajne animacje. Domyślnie stosowane są wydajniejsze metody opisane w przewodniku po animacjach. możesz poświęcić więcej czasu na tworzenie pożądanego efektu i nie martwić się, że strona spowalnia wczytywanie strony.