#68. Animacje CSS – wprowadzenie

Wprowadzenie do animacji

Przez najbliższe osiem tygodni (zaplanowałem 8 postów) pokaże Ci jak tworzyć animacje CSS i efekty graficzne zachowując odpowiednie praktyki i kompatybilność z wszystkimi przeglądarkami.

Odkryjemy dogłębnie zasady działania przejść w CSS i transformacji 2D oraz0 3D. Dodam również rozbudowany materiał o filtrach i gradientach.

Sporą częścią materiału stanowić będą animacje CSS, w których od podstaw pokaże jak budować animacje bez komplikacji.

Zazwyczaj dodaję ćwiczenie na końcu rozdziału, ale tym razem również na początku poćwiczysz sobie na przykładzie.

  1. Stwórz podstawową deklaracje html.
  2. W ciele dokumentu dodaj diva z klasą loader. W środku dodaj trzy divy z klasami odpowiednio: one, two, three.
  3. Przejdź do pliku style.css. Dla całego dokumentu dodaj selektor *. W środku dodaj następujące właściwości: margines zerowy, padding zerowy, ramka zerowa i box-sizing: border-box;.
  4. Dodaj koleją deklaracje odnoszącą się do ciała dokumentu i znacznika html: wysokość na 100%.
  5. Dla samego ciała strony dodaj tło w jakimkolwiek kolorze.
  6. Przejdźmy do naszej pierwszej klasy. Dodaj deklarację klasy loader. W środku umieść następujące właściwości: szerokość 200px, wysokość 200px, pozycje absolutną, top, left right i bottom na 0 oraz margines automatyczny.
  7. Ostylujmy divy zawarte w klasie loader. Dodajmy następujące właściwości: top, left, right, bottom na zero, margines automatyczny, transform: rotate(45deg), border-top-color: przykładowy kolor, opóźnienie animacji: .25s, zaokrąglenie ramki na 50%, pozycja absolutna, animation: spin 2s infinite.
  8. Następnie ostylujmy klasę one zawartą w klasie loader. Dodajmy następujące właściwości: szerokość 200px, wysokość 200px, transform: rotate(45deg), border: 20px solid transparent, border-top-color: przykładowy kolor i opóźnienie animacji na 0s.
  9. Przejdźmy do klasy two zawartej w klasie loader. Dodajmy następujące właściwości: szerokość 133.33333px, wysokość 133.33333px, border: 20px solid rgba(255, 255, 255, 0.5), border-top-color: przykładowy kolor i opóźnienie animacji na 0.25s.
  10. Ostatnią klasą którą ostylujemy jest three zawartą w klasie loader. Dodajmy następujące właściwości: szerokość 66.66667px, wysokość 66.66667px, border: 20px solid rgba(255, 255, 255, 0.5), border-top-color: przykładowy kolor i opóźnienie animacji na .5s.
  11. Aby nasza animacja zaczęła żyć należy dodać następującą deklarację: 
@keyframes spin {
  50%,
	100% {
    transform: rotate(405deg);
  }
} 
PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

damp-rain-kqq0l

damp-rain-kqq0l danielminschinski

Pierwsze koty za płoty. Uruchomiliśmy wspólnie pierwszą naszą animacje. W kolejnych materiałach przedstawie rozszerzenie tematu. Sprawdź Plan nauki Frontend Developera aby już teraz zapoznać się z tematami które zostaną udostępnione.

Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb oraz kanału na YouTube.

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!