Сьогоднішньою темою лекції є CSS-анімація Як ви вже могли зрозуміти, що динамічність на сайтах дуже важлива Я кажу вам приклади того, які можуть бути CSS-анімацій Це все зроблено за допомогою HTML, CSS

Виглядає круто Ось також анімація Я гадаю, що на більшості сайтів ви бачили, що є анімація Приблизно так вона виглядає Також відбувається трансформація тексту Все доволі таке круто, тобто можливості величезні

CSS-анімації в більшості випадків створюється за допомогою правила keyframes Це ключове слово Воно встановлює ключові кадри для анімації елементи Ключовий кадр – це властивість елемента Наприклад, прозорість, колір, положення

Вони повинні застосуватись до елементу в заданий момент часу Таким чином анімація представляє собою плавний перехід властивостей від одного ключового кадру до іншого І що є плюсом для нас – обчислення проміжних значень між такими кадрами бере на себе браузер

Отже, пропоную на прикладі переглянути Як завжди посилання на гітхаб прикріплю Ось я створив простий html файл І також до нього додав css файл Ось я поки що коментую

Ми зараз переглянемо, як це все виглядає Ось у нас на сторінці є простий круг І пропоную почати Для створення анімації використовуюся, як я вже говорив, ключове слово keyframes Разом із однією або декількома властивостями, що керують анімаціями

Або є можливість використати універсальну властивості animation Але потім ми розглянемо Ось, пропоную почати і створення keyframes keyframes ми вказуємо ключове слово Спочатку у нас равлик

І назва Це фактично назва нашої анімації Потім відкриваються фігурні скобки, як завжди, відкриваюча закриваюча І також в нас вказується відсотки Тобто загалом нашу анімацію можна представити у вигляді відсотків Тобто 0 це початок анімації, 100% це кінець нашої анімації

Також ми можемо тут фактично для кожного відсотка прописати Як буде змінюватися певні наші властивості І ось як я пропоную Поки що по одному елементу Тобто у нас, як ви бачили, є наш кол на сторінці

І я йому додаю animation name Тобто саме за допомогою цієї характеристики Відбувається зв'язка ось цієї частини коду із нашим блоком Зберігаємо і переглянемо, що в нас відбулось Нічого не відбулось, тому що у нас тільки прив'язана анімація

І саме animation name становлює одну або кілька анімацій, які застосовуються до даного елементу Являє собою ім'я, пов'язаний з правилом keyframe Воно в свою чергу задає последовність руху Тобто ось те, що ми з вами обговорили Добре, наступною властивістю у нас є...

Так, не пропоную, не так Ми поки що це закоментуємо Нам потрібно animation duration Це властивість, що задає час у секундах або мілісекундах

Продовж якого повинен тривати один цикл анімацій По дефолту це значення дорівня 0 секунд Тобто це означає, як ми з вами побачили, що жодної анімації не відбулось Ось зараз ми встановлюємо 2 секунди Тобто переглядаємо на результат

І ось ми бачимо, вже відбувається наша анімація Ось ми бачимо Загалом можна сказати, що анімація починається з нуля Тобто там, де LEFT для нашого блоку, дорівнює 0 Потім, коли ми проходимо до 50

Бордерадіус, тобто від нуля до 50, ось бордерадіус у нас тут 50 Він стає поступово нульом І також цей час наш елемент рухається до нашого LEFT Тобто туди також відбувається розрахунок переходу LEFT

І далі повертається, тобто коли анімація доходить до 100% Значення бордерадіус поступово повертається до 50 І відповідно LEFT встановлюється 500 пікселів Так, наступна властивість – це ANIMATION TIMING FUNCTION

Для цього навіть я підготував зображення, щоб краще було зрозуміло Це функція, як буде відбуватися анімація кожного циклу між ключовими кадрами

Тобто ось може бути лінійно Тобто ми ви бачили, що у нас от анімація йде непослідовно під кінець, ніби вона повільніше йде Ось саме за рахунок цієї функції, тому що по дефолту, якщо не помиляюся, стоїть EASY

І ось так вона працює Тобто це основні параметри, які можуть бути такі найбільш дефолтні І ось ми бачимо, це буде йти послідовно, він послідовно йде від 0 до 500 Кожен наступний момент часу збільшує LEFT EASY – тут вже складніша формула того, як це буде змінюватися

Спочатку повільніше, потім різко-швидко, потім знову повільніше Ну, я загалом думаю, ви з функціями знайомі, тому по дефолту EASY Можемо з вами зараз для експерименту встановити лінійну Ось подивимось, як змінюється анімація

Тобто ось зараз буде йти послідовно, ніяких ривків і тому подібне Ось ми повертаємо назад на EASY, встановлюємо по 0 Ось бачите, в кінці заповільнюється Добре, наступною характеристикою є ANIMATION DELAY Дайте це зрозуміло, ANIMATION DELAY встановлює затримку

через скільки дана функція почне відпрацьовувати Також в одинисях часу визначається Тобто ось дві секунди не є, немає анімації, потім вона починається Наступною властивістю є ITERATION COUNT Ось ми з вами додаємо

Зараз є значення INFINITY І ось ми, наприклад, хочемо встановити, що два рази нас буде анімація запускати Дві секунди затримка, одна ітерація і друга ітерація Все Коли ми встановлюємо INFINITY, у нас відбувається безкінечне відтворення нашої анімації

Так ось ми оновили затримка І далі Добре, наступною, так це ми з вами опрацювали Наступною властивістю є линку ANIMATION DIRECTION Так ось ми встановлюємо Це можна віддалять

Так, ми встановлюємо ANIMATION DIRECTION Встановлює напрямок руха анімації Ось у нас їх декілька Нормально, альтернативно Тобто це буде Ось коли ми встановлюємо альтернативно Встановлюється таким чином, що анімація буде рухатися

Вперед-назад, вперед-назад Тобто пін-понг фактично ось ми оновлюємо І у нас анімація вперед пішла, потім назад Перед Гадаю зрозуміло, якщо ми встановимо Становимо ось наприклад NORMAL Переглянемо як воно буде працювати

Ось у нас, тобто, йде послідовне відтворення Тобто із початку Так, давайте також Яких ще є? REVERSE Можемо переглянути Як він виглядає Тобто анімація відразу починається з іншої сторони Так, також ще є два

Дві характеристики, дві властивості Вірніше, FULL MODE ANIMATION FULL MODE Визначає, які стилі повинні застосуватись до елементу, коли анімація не програється Зараз не буду демонструвати ці властивості Так, ці властивості І також є ANIMATION PLAY STATE

Загалом це визначає, чи повинна анімація відтворюватися, чи ні Тому що ось може бути анімація безкінечна І в певний момент, наприклад, наведення на певне зображення Ми хочемо, на певний елемент або натиск на кнопку Ми хочемо, щоб анімація зупинилася

Так що ж базові визначення щодо анімації, я гадаю, зрозуміли Зараз продемонструю, також відбулися оновлення нашого CV Я оновив його Ось, до речі, відразу додав анімацію Анімація абсолютно проста Ми з вами переглядали анімацію з колом

Тільки що коли рух йде з LEFT 0 до LEFT 500 пікселів Тут схожим чином Також я додав тут досить роботи, щоб CV виглядало більше репрезентативно І також оновив CONTACT FORM Зараз вона має такий вигляд

Загалом ми з вами змогли збудувати таке CV Зараз продемонструю, як я описав цю анімацію Тобто ось анімація тут проста Тут три анімації у нас У нас йде прозорість від нуля Тобто у нас початку я звернітював CV прозоре

А потім воно поступово набуває колір Потім для елементу ABOUT EDUCATION Я ось додав анімацію, рух з ліва Три секунди і додав EASY IN-OUT ANIMATION TIMING FUNCTION

Для SKILL AND WORK я додав рух з права і ті ж самі параметри І ось три рядки дали на можливість отримати ось таку анімацію Вгадаю, все зрозуміло Домашнє завдання буде полягати в створенні своєї анімації

Ви можете додати анімацію для зображення Для будь-яких елементів, що вас цікавлять Можете просто використати існуючі анімації, ті, що додані в CV Гідка посилання, як завжди, по QR-коду