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.
- Stwórz podstawową deklaracje html.
- W ciele dokumentu dodaj diva z klasą
loader. W środku dodaj trzy divy z klasami odpowiednio:one,two,three. - 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 ibox-sizing: border-box;. - Dodaj koleją deklaracje odnoszącą się do ciała dokumentu i znacznika html: wysokość na 100%.
- Dla samego ciała strony dodaj tło w jakimkolwiek kolorze.
- 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. - 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. - Następnie ostylujmy klasę
onezawartą w klasieloader. Dodajmy następujące właściwości: szerokość 200px, wysokość 200px,transform: rotate(45deg),border: 20px solid transparent,border-top-color: przykładowy kolori opóźnienie animacji na 0s. - Przejdźmy do klasy
twozawartej w klasieloader. 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 kolori opóźnienie animacji na 0.25s. - Ostatnią klasą którą ostylujemy jest
threezawartą w klasieloader. 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 kolori opóźnienie animacji na .5s. - Aby nasza animacja zaczęła żyć należy dodać następującą deklarację:
@keyframes spin {
50%,
100% {
transform: rotate(405deg);
}
} 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