Jak sprawdzić animacje CSS za pomocą Chrome DevTools
Animacje CSS, wykonane prawidłowo, mogą podnieść Twoją witrynę na inny poziom. Ale tworzenie tych animacji może być trudne bez narzędzi, które zapewniają precyzyjną kontrolę nad nimi. A gdyby istniał sposób, aby dokładnie zobaczyć, co dzieje się na każdym etapie animacji?
Wykorzystując funkcjonalność DevTools obecną zarówno w Google Chrome, jak i Mozilla Firefox, można uzyskać wgląd w swoje animowane kreacje i powielać te, które można znaleźć na różnych stronach internetowych.
Podstawowe debugowanie animacji za pomocą DevTools
Rzeczywiście, Narzędzia dla programistów Google Chrome oferują szereg przydatnych funkcji do debugowania różnych aspektów tworzenia stron internetowych, w tym między innymi CSS. To wszechstronne narzędzie pozwala użytkownikom badać i analizować wydajność ich witryny, identyfikować potencjalne problemy i optymalizować elementy projektu. Jako punkt wyjścia, pomocne może okazać się wykorzystanie Narzędzi dla programistów do sprawdzania i badania animacji w swoich projektach.
Kod źródłowy tych ilustracji jest dostępny za pośrednictwem repozytorium GitHub, które służy jako cyfrowy depozyt dla projektów tworzenia oprogramowania i ułatwia współpracę między programistami, zapewniając funkcje kontroli wersji i narzędzia do zarządzania zmianami wprowadzanymi w bazie kodu.
Definiowanie animacji za pomocą HTML i CSS
element div i element przycisku. Dodatkowo zawiera dokument CSS zatytułowany “style.css”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="box"></div>
<button>Test Button</button>
</body>
</html>
Aby zastosować spójny wygląd do obu tych elementów, konieczne jest wygenerowanie pliku CSS (Cascading Style Sheets) w tym samym katalogu co dokument HTML. Plik ten powinien zawierać następujący kod:
#box {
background: red;
height: 400px;
width: 400px;
margin-bottom: 1rem;
animation: rotateAndChangeColor 1000ms ease-in-out;
}
button {
font-size: larger;
background-color: white;
border: 1px solid black;
padding: 0.5em 1em;
color: black;
height: 80px;
width: 300px;
border-radius: 0.5em;
transition: background-color 100ms ease-in-out, color 100ms ease-in-out;
cursor: pointer;
}
button:hover {
background-color: black;
color: white;
}
@keyframes rotateAndChangeColor {
0% {
rotate: 0deg;
background: red;
}
10% {
background: green;
}
40% {
background: blue;
}
70% {
background: yellow;
}
100% {
rotate: 360deg;
background: red;
}
}
Style te tworzą dwa elementy:
Urzekające wizualnie, animowane pudełko, które obraca się i zmienia swój odcień podczas ładowania strony internetowej.
Element interfejsu użytkownika znany jako “przycisk” przechodzi wizualną transformację, zmieniając swój “kolor tła” w odpowiedzi na dane wejściowe użytkownika, w szczególności gdy kursor lub wskaźnik jest umieszczony nad nim i nie styka się z żadnym innym obiektem na ekranie. Zmiana ta następuje poprzez proces “najechania”, który wyzwala zdarzenie w przeglądarce lub aplikacji, powodując tymczasową modyfikację wyglądu przycisku.
Wykorzystanie dyrektywy CSS @keyframes umożliwia animację czerwonego pola, podczas gdy przycisk wykorzystuje przejście do jego transformacji. Porównanie tych technik można ułatwić poprzez zbadanie ich odpowiednich aplikacji w narzędziach programistycznych przeglądarki.
Sprawdzanie animacji za pomocą narzędzi deweloperskich
Aby uzyskać dostęp do zakładki “Animacje” w Narzędziach dla programistów Chrome, wykonaj następujące kroki:
Kliknięcie prawym przyciskiem myszy bieżącej strony internetowej wywoła menu kontekstowe, które przedstawia różne opcje manipulowania lub interakcji z treścią wyświetlaną na ekranie.
⭐ClickInspect.
Kliknij trzy pionowe kropki znajdujące się w prawym górnym rogu ekranu.
Uzyskaj dostęp do opcji “Animacje”, przechodząc do kategorii “Więcej narzędzi” i wybierając ją stamtąd.
Ta akcja spowoduje wyświetlenie wizualnej reprezentacji animacji w dolnej części interfejsu, umożliwiając użytkownikom dostęp do tych efektów i manipulowanie nimi.
Wszelkie efekty wizualne pojawiające się na tej stronie będą wyświetlane w tej sekcji. W przypadku przeładowania strony i umieszczenia kursora nad określonym elementem, wspomniane sekwencje animacji pojawią się w wyznaczonej zakładce “Animacje” po odświeżeniu obszaru wyświetlania treści.
Rzeczywiście, po kliknięciu dowolnej z tych animacji, takich jak na przykład animacja pudełka, przeglądarka wyświetli klatki kluczowe w sposób ilustrujący jej strategię implementacji.
Narzędzia dla programistów wyświetlają przegląd wszystkich animacji powiązanych z wybranym elementem, biorąc pod uwagę, że tylko jeden animowany proces jest określony dla czerwonego kontenera - obrót i zmiana koloru - w związku z tym w interfejsie będą wyświetlane tylko szczegółowe informacje dotyczące tej animacji.
Możesz dostosować pozycję głowicy odtwarzania wzdłuż osi czasu, aby kontrolować tempo sekwencji wizualnej, przyspieszając lub opóźniając jej postęp w zależności od preferencji. Dodatkowo, animację można wstrzymać w określonych momentach, przełączając się między ikonami odtwarzania i pauzy, zapewniając większą kontrolę nad oglądaniem. Co więcej, podane wartości procentowe na początku osi czasu umożliwiają manipulowanie tempem animacji, pozwalając na zmniejszenie prędkości o 25% lub jeszcze wolniejsze tempo o 10%.
Badając zachowanie przycisku za pomocą Narzędzi dla programistów, można zaobserwować konkretne atrybuty, które przyczyniają się do jego wizualnej transformacji, takie jak kolor i kolor tła.
Narzędzie to umożliwia modyfikowanie animacji w celu uzyskania pełnego zrozumienia ich funkcjonalności.Umożliwia diagnozowanie i rozwiązywanie wszelkich problemów, które mogą pojawić się na Twojej stronie internetowej.
Zaawansowane przykłady animacji
Umieść podane znaczniki w elemencie dokumentu HTML w następujący sposób:
<div class="move-me move-me-1">steps(4, end)</div>
<br />
<div class="move-me move-me-2">steps(4, start)</div>
<br />
<div class="move-me move-me-3">no steps</div>
Włącz dostarczony fragment kodu do sekcji