Lesson7

Lekcja 7: Animacje CSS – Ożyw Swoje Strony Internetowe!

Wprowadzenie

Witaj ponownie, mistrzu kodu! 🎨 Jeśli CSS transitions to eleganckie kroki poloneza na studniówce, to animacje CSS to już pełna impreza na 18-tce z fajerwerkami, dymem i tortem w kształcie laptopa. W tej lekcji podniesiemy poprzeczkę i nauczymy się tworzyć animacje, które sprawią, że Twoje strony będą żyć własnym życiem.

Pod koniec tej lekcji Twoje przyciski będą skakać, ikony kręcić piruety, a tekst będzie wjeżdżać jak gwiazda na scenę. Zakładaj wygodne kapcie, weź kubek herbaty – i zaczynamy ten cyrk!

Krok 1: Czym Są Animacje CSS?

Jeśli transitions to miłe, płynne zmiany stylów, to animacje CSS to już prawdziwe show z efektem „wow”! Wyobraź sobie transitions jako powitanie sąsiada: „Dzień dobry, jak tam?”. A teraz wyobraź sobie animacje jako jego wejście z hukiem, tanecznym krokiem i sztucznymi ogniami w tle: „Cześć! Patrz na to!”

Z pomocą animacji możesz ustalać kluczowe klatki, czyli dokładnie określać, co ma się dziać z Twoim elementem na różnych etapach. I nagle… magiczne transformacje!

Oto prosty przykład:

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px); /* Skok w górę! */
    }
    100% {
        transform: translateY(0); /* Powrót na dół */
    }
}

.ball {
    animation: bounce 1s ease-in-out infinite; /* Skacz bez przerwy, jak piłka pingpongowa */
}

Ten kod sprawi, że Twoja .ball będzie skakać jak piłeczka na stołach w Ping Pong Club. (Bez obaw, piłeczka nie wymaga karty członkowskiej.)

Krok 2: Przygotowanie Projektu – Robimy Porządek!

Czas stworzyć porządną strukturę projektu, bo przecież nie chcemy bałaganu w kodzie, prawda? Oto jak to zrobić:

cd ~/Documents/
mkdir moj-projekt-css-animacje
cd moj-projekt-css-animacje
touch index.html styles.css

Teraz otwórz index.html w ulubionym edytorze tekstu, czy to VSCode, Vim, czy nawet stary dobry Nano – i wklej poniższy kod:

HTML

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animacje CSS – Witaj na Imprezie!</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Witaj na najlepszej imprezie CSS!</h1>
        <p>Patrz, jak te elementy na stronie ożywają i zaczynają tańczyć z elegancją godną mistrza baletu:</p>
    </header>
    <main>
        <div class="ball"></div>
        <div class="square"></div>
    </main>
    <footer>
        <p>&copy; 2024 Animacje od Kodu</p>
    </footer>
</body>
</html>

CSS

Teraz otwórz styles.css i wklej poniższy kod, żeby magia mogła się wydarzyć:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    text-align: center;
    padding-top: 50px;
}

header, footer {
    background-color: #3498db;
    color: white;
    padding: 20px;
}

main {
    margin: 20px;
    padding: 20px;
}

/* Styl dla animowanych elementów */
.ball {
    width: 50px;
    height: 50px;
    background-color: #e74c3c;
    border-radius: 50%;
    display: inline-block;
    margin: 20px;
    animation: bounce 1s ease-in-out infinite;
}

.square {
    width: 50px;
    height: 50px;
    background-color: #2ecc71;
    display: inline-block;
    margin: 20px;
    animation: spin 2s linear infinite;
}

/* Kluczowe klatki dla skoku */
@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Kluczowe klatki dla obrotu */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

Z tym kodem Twoja kulka będzie skakać jak szalona, a kwadrat będzie kręcił piruety godne profesjonalisty!

Krok 3: Uruchamiamy Projekt Lokalnie z Caddy!

No to czas pokazać, co potrafisz! Użyjmy Caddy, żeby odpalić lokalny serwer i zobaczyć, jak wszystko rusza się w najlepsze:

Otwórz terminal i przejdź do folderu projektu:
```
cd ~/Documents/moj-projekt-css-animacje
```
Uruchom serwer za pomocą Caddy:
```
caddy file-server --listen :8080
```
Wpisz w przeglądarkę:
```
http://localhost:8080
```

I voilà! Teraz patrz, jak Twoje elementy tańczą, jakby miały zaraz zdobyć pierwsze miejsce w „Mam Talent”.

Ważna Rada: CSS nie działa?

Jeśli wprowadziłeś zmiany, ale ich nie widzisz, przeglądarka może trzymać starą wersję w pamięci. Aby to naprawić, odśwież stronę na twardo:

Windows/Linux: CTRL + F5 lub CTRL + SHIFT + R
Mac: CMD + SHIFT + R

Twoje animacje wreszcie będą działać tak, jak tego chcesz!

Wyzwanie – Stwórz Pulsujący Krąg!

Na koniec zróbmy coś specjalnego! Spróbuj stworzyć <div> w kształcie koła, które płynnie rośnie i maleje, jak gdyby oddychało. Oto, jak zacząć:

<div class="pulsujacy-krag"></div>

CSS

.pulsujacy-krag {
    width: 100px;
    height: 100px;
    background-color: #9b59b6;
    border-radius: 50%;
    margin: 50px auto;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2); /* Powiększenie */
    }
    100% {
        transform: scale(1); /* Powrót do normy */
    }
}

Teraz Twój krąg będzie pulsował jak serce na widok nowego laptopa!

Podsumowanie

Brawo, mistrzu animacji! Teraz wiesz, jak stworzyć CSS-owe cuda, które sprawią, że Twoje strony będą żywe, ruchome i pełne energii. W następnym rozdziale zagłębimy się w zaawansowane animacje — łączenie efektów, synchronizację ruchów i tworzenie skomplikowanych choreografii. Do zobaczenia na tanecznym parkiecie kodu!