. Strona importuje również plik CSS o nazwie style.css:
<!DOCTYPE html>
Aby nadać styl obu elementom, utwórz plik style.css w tym samym folderze, co plik HTML i dodaj następujące elementy:
#box {button {
button:hover {
@keyframes rotateAndChangeColor {
Style te tworzą dwa komponenty:
Proste pudełko, które obraca się i zmienia kolor podczas ładowania strony.
Przycisk, który zmienia kolor tła po najechaniu na niego kursorem.
Zauważ, że czerwone pole jest animowane przy użyciu dyrektywy CSS @keyframe, podczas gdy przycisk wykorzystuje przejście. Umożliwia to porównanie obu podejść przy użyciu narzędzi DevTools przeglądarki.
Aby uzyskać dostęp do karty Animacje w Chrome DevTools:
Kliknij stronę prawym przyciskiem myszy, aby wyświetlić menu kontekstowe.
Kliknij Sprawdź.
Kliknij potrójne kropki w prawym górnym rogu.
Przejdź do opcji Więcej narzędzi > Animacje.
Spowoduje to otwarcie szuflady animacji w dolnej części.
Wszelkie animacje, które pojawią się na Twojej stronie, pojawią się tutaj. Jeśli odświeżysz stronę i najedziesz kursorem na przycisk, animacje pojawią się w zakładce animacje.
Prawdziwa moc pojawia się, gdy klikniesz na jedną z tych animacji. Na przykład, jeśli klikniesz animację pola, zobaczysz, że przeglądarka prezentuje klatki kluczowe w następujący sposób:
Narzędzia DevTools wyświetlają wszystkie animacje związane z wybranym elementem. Ponieważ dla czerwonego pola zdefiniowano tylko jedną animację — obrót i zmiana koloru — zobaczysz tylko jej szczegóły.
Możesz przeciągnąć linię w lewo, aby animacja była znacznie szybsza, lub przeciągnij ją w prawo, aby spowolnić animację. Możesz także wstrzymać animację w określonych momentach, przełączając ikony pauzy i odtwarzania. Wartości procentowe na górze pozwalają odtwarzać animację odpowiednio z jedną czwartą normalnej prędkości i jedną dziesiątą jej szybkości.
Kiedy sprawdzisz przejście przycisku, DevTools pokaże indywidualne właściwości przejścia: kolor i kolor tła.
To narzędzie pozwala manipulować animacją, aby zobaczyć dokładnie, jak ona działa. Możesz go użyć do rozwiązywania problemów ze swoją witryną, jeśli wystąpią jakiekolwiek problemy.
Zacznij od zastąpienia znaczników w tagu HTML
następującym znacznikiem:
<div class="move-me move-me-1">steps(4, end)</div>
Następnie zamień wszystkie style w pliku style.css na:
.move-me {.move-me-1 {
.move-me-2 {
.move-me-3 {
body {
@keyframes move-in-steps {
100% {
Do wszystkich elementów
zastosowano animację ruchu krokowego, która zmienia położenie i kolor tła. Oprócz tego każde pudełko ma inną animację kontrolującą liczbę kroków, które wykona.
Podczas gdy trzecie pole stale przesuwa się w prawo, pierwsze dwa będą przesuwać się o dwa kroki na raz, aż dotrą do końca ekranu (drugie pole zacznie się przed pierwszym).
Jeśli otworzysz zakładkę Animacje w DevTools i odświeżysz stronę, znajdziesz wszystkie informacje dotyczące tych animacji:
Istnieje kilka elementów, które ożywiają się w tym samym okresie. W tym scenariuszu kolor tła i położenie pola są animowane jednocześnie dla wszystkich trzech pól.
Kolejną rzeczą wartą odnotowania są węzły w każdej linii animacji. Kiedy animacja pojawia się nieskończoną liczbę razy, węzły pokazują, gdzie zaczyna się i kończy każde powtórzenie animacji.
Puste węzły to w zasadzie klatki kluczowe animacji, natomiast pełne, kolorowe węzły reprezentują początek i koniec animacji. Za każdym razem, gdy animacja zacznie się od nowa, będziesz mieć ciemne węzły.
Wreszcie możesz edytować animacje za pomocą DevTools, tak samo jak w przypadku dowolnej właściwości CSS. Wszystkie zmiany wprowadzone za pomocą interfejsu animacji zostaną wyświetlone w stylach wbudowanych na karcie Style i odwrotnie. Dzięki temu możesz wprowadzać zmiany, testować je i kopiować do rzeczywistego projektu.
Funkcja DevTools w przeglądarce Google Chrome to niesamowite narzędzie do debugowania CSS, w tym animacji. Zapewnia szczegółowy widok każdego przejścia i animacji na Twojej stronie, dzięki czemu możesz dokładnie zobaczyć, co dzieje się na każdym kroku.
Jako programista stron internetowych powinieneś znać funkcję DevTools swojej przeglądarki lub jej odpowiednik.
