. Strona ta korzysta również z zewnętrznego arkusza stylów CSS, o nazwie style.css:
<!DOCTYPE html>
Aby ostylować oba elementy, należy utworzyć plik o nazwie style.css w tym samym folderze co plik HTML, a następnie dodać do niego następujące reguły:
#box {button {
button:hover {
@keyframes rotateAndChangeColor {
Powyższe style tworzą dwa elementy:
Prostokąt, który obraca się i zmienia kolor podczas ładowania strony.
Przycisk, który reaguje zmianą koloru tła na najechanie kursorem myszy.
Czerwony prostokąt jest animowany za pomocą dyrektywy CSS @keyframe, podczas gdy przycisk korzysta z przejścia. Daje to możliwość porównania obu tych technik przy użyciu narzędzi deweloperskich przeglądarki.
Aby otworzyć panel Animacje w Chrome DevTools, wykonaj następujące kroki:
Kliknij prawym przyciskiem myszy w dowolnym miejscu na stronie i wybierz z menu kontekstowego „Zbadaj”.
W otwartym panelu narzędzi deweloperskich, kliknij ikonę z trzema kropkami w prawym górnym rogu.
W rozwijanym menu przejdź do „Więcej narzędzi” i wybierz „Animacje”.
W efekcie na dole okna pojawi się szuflada z zakładką Animacje.
Wszystkie animacje, które pojawią się na twojej stronie, zostaną w tym miejscu zarejestrowane. Odśwież stronę i najedź kursorem myszy na przycisk – animacje pojawią się w panelu Animacje.
Prawdziwa moc tej funkcji ujawnia się po kliknięciu na konkretną animację. Na przykład, po wybraniu animacji prostokąta, przeglądarka pokaże klatki kluczowe w następujący sposób:
Narzędzia deweloperskie wyświetlają wszystkie animacje związane z wybranym elementem. Ponieważ dla czerwonego prostokąta zdefiniowano tylko jedną animację – obrót i zmiana koloru – zobaczysz tylko jej szczegóły.
Możesz przesuwać linię czasu w lewo, aby znacznie przyspieszyć odtwarzanie animacji, lub w prawo, aby ją spowolnić. Możesz również wstrzymywać animację w dowolnym momencie, używając przycisków pauzy i odtwarzania. Ikony procentowe na górze pozwalają na odtwarzanie animacji z prędkością odpowiednio 1/4 i 1/10 normalnej szybkości.
Po sprawdzeniu przejścia przycisku, DevTools pokaże poszczególne właściwości, które podlegają przejściu: kolor i kolor tła.
To narzędzie pozwala na manipulację animacją, aby dokładnie przeanalizować jej działanie. Możesz je wykorzystać do rozwiązywania problemów na swojej stronie internetowej.
Zacznij od zastąpienia treści w tagu w pliku HTML następującym kodem:
<div class="move-me move-me-1">steps(4, end)</div>
Następnie zastąp całą treść pliku style.css następującymi regułami:
.move-me {.move-me-1 {
.move-me-2 {
.move-me-3 {
body {
@keyframes move-in-steps {
100% {
Do wszystkich elementów
zastosowano animację krokową, która zmienia ich położenie i kolor tła. Dodatkowo, każda z tych skrzynek ma inną animację, która steruje liczbą kroków, jakie wykona.
Podczas gdy trzecie pole przesuwa się płynnie w prawo, dwa pierwsze będą przesuwać się skokowo, o dwa kroki na raz, aż osiągną koniec ekranu (przy czym drugie pole rozpocznie ruch przed pierwszym).
Otwórz panel Animacje w DevTools i odśwież stronę. Zobaczysz szczegółowe informacje na temat tych animacji:
Kilka elementów jest animowanych w tym samym przedziale czasu. W tym scenariuszu kolor tła i położenie są animowane jednocześnie dla wszystkich trzech pól.
Kolejną ważną rzeczą są węzły na każdej linii animacji. Gdy animacja jest powtarzana w nieskończoność, węzły pokazują początek i koniec każdego powtórzenia.
Puste węzły odpowiadają klatkom kluczowym animacji, natomiast pełne, kolorowe węzły wskazują początek i koniec każdego cyklu animacji. Z każdym nowym rozpoczęciem animacji będziesz widzieć ciemne węzły.
Co więcej, za pomocą DevTools możesz edytować animacje w taki sam sposób, jak dowolne inne właściwości CSS. Wszelkie zmiany wprowadzone w interfejsie animacji pojawią się w stylach wbudowanych w zakładce Style i na odwrót. Dzięki temu możesz eksperymentować, testować i kopiować zmiany bezpośrednio do swojego projektu.
Funkcja DevTools w przeglądarce Google Chrome to doskonałe narzędzie do debugowania kodu CSS, w tym animacji. Zapewnia szczegółowy wgląd w każde przejście i animację na stronie, co pozwala na precyzyjne śledzenie ich działania.
Jako twórca stron internetowych, warto dobrze poznać funkcjonalności narzędzi deweloperskich swojej przeglądarki.
