Урок 7: CSS Анімації – Оживи Свої Веб-Сторінки!

Lesson7

Урок 7: CSS Анімації – Оживи Свої Веб-Сторінки!

Огляд

Вітаю знову, креативний генію! 🎨 Якщо CSS переходи – це такі собі ввічливі танцювальні па, то CSS анімації – це повноцінний танцювальний батл із ліхтарями, музикою і диско-кулею. У цьому уроці ми перейдемо на новий рівень і навчимося створювати анімації, які перетворять твої статичні елементи на динамічні, живі витвори мистецтва.

Після цього уроку твій сайт буде стрибати, крутитися і ковзати, як на справжній танцпол. Тож приготуй свої найкращі танцювальні рухи і давай почнемо цю вечірку!

Крок 1: Що Таке CSS Анімації?

Якщо переходи роблять елементи плавними між стилями, то анімації беруть цю ідею і збільшують її до 100%. Уяви переходи як легкий поклон, а анімації – як справжній гопак із підкидом! З анімаціями ти можеш визначати ключові кадри – конкретні моменти шляху твоїх елементів – і контролювати, як саме відбуватиметься вся магія.

Ось маленький приклад:

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px); /* Стрибок угору! */
    }
    100% {
        transform: translateY(0); /* І назад вниз */
    }
}

.ball {
    animation: bounce 1s ease-in-out infinite; /* Стрибай постійно */
}

Цей приклад зробить так, що твій елемент .ball буде стрибати вгору-вниз, як гумовий м’ячик на енергетиках. (Ні, ми не давали йому кави.)

Крок 2: Налаштування Проєкту – Зробімо Порядок!

Створімо нову папку для нашого проєкту. Зробимо все акуратно, щоб було куди впорядкувати всі ці божевільні танцювальні рухи:

cd ~/Documents/
mkdir moy-css-animatsii-proekt
cd moy-css-animatsii-proekt
touch index.html styles.css

Тепер відкрий index.html у своєму улюбленому редакторі й додай наступне:

HTML

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Анімації – Вечірка в Розпалі!</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Ласкаво просимо на вечірку CSS анімацій!</h1>
        <p>Подивись, як елементи на цій сторінці оживають і танцюють зі стилем:</p>
    </header>
    <main>
        <div class="ball"></div>
        <div class="square"></div>
    </main>
    <footer>
        <p>&copy; 2024 Веселі Анімації</p>
    </footer>
</body>
</html>

CSS

Тепер відкрий styles.css і додай ці стилі, щоб розпочати магію:

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;
}

/* Стилі для наших анімованих елементів */
.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;
}

/* Ключові кадри для стрибка */
@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Ключові кадри для обертання */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

З цими стилями твоя кулька буде стрибати, а квадрат крутитись, наче вони щойно виграли танцювальний конкурс!

Крок 3: Запустимо Локально за Допомогою Caddy – Показуємо Свою Магію!

Використовуй Caddy, щоб подивитись на свій проєкт у дії:

  1. Відкрий термінал і перейдіть до папки з проєктом:

    cd ~/Documents/moy-css-animatsii-proekt

  2. Запусти локальний сервер за допомогою Caddy:

    caddy file-server --listen :8080

  3. Відкрий браузер і перейди на:

    http://localhost:8080

Ось і все! Тепер подивись, як кулька стрибає, а квадрат крутиться, ніби вони танцюють в нічному клубі.

Важлива Порада: CSS Не Оновлюється?

Якщо ти вніс зміни в CSS, але їх не бачиш, браузер може використовувати стару версію. Щоб це виправити, онови сторінку жорстко:

  • Windows/Linux: CTRL + F5 або CTRL + SHIFT + R
  • Mac: CMD + SHIFT + R

І все, твоя анімація готова до показу!

Підсумок

Вітаю, маг анімацій! 🧙‍♂️ Ти навчився використовувати CSS, щоб оживити свої елементи, зробити їх такими ж рухливими, як яскравий шоу-балет на сцені. Тепер ти можеш створювати все – від легких ефектів до справжніх диско-танців!

У наступному розділі ми розглянемо просунуті анімації — поєднання кількох ефектів, синхронізацію рухів і створення складних хореографій. До зустрічі, і пам’ятай: життя коротке – додай трохи анімації!

CSS  Анімації  Веб-дизайн  Початківці  Caddy Server 

See also