@@ -146,19 +145,25 @@ p {
``` -> **Примітка:** Аби побачити анімацію – перезавантажте сторінку. +> [!NOTE] +> Аби побачити анімацію – перезавантажте сторінку. {{EmbedLiveSample("tekst-shcho-kovzaie-viknom-brauzera","100%","250")}} -### Додавання іще одного ключового фрейму +### Додавання іще однієї анімації ключових кадрів -Додаймо до анімації попереднього прикладу іще один ключовий фрейм. Скажімо, хочеться, аби розмір шрифту збільшувався при русі справа наліво, а тоді зменшувався назад. Для цього достатньо додати такий ключовий фрейм: +Додаймо до анімації попереднього прикладу ще один ключовий кадр. Скажімо, що хочемо, аби дієслово "вслухаєшся" ставало рожевим, збільшувалося, а потім знову зменшувалося до свого початкового розміру й кольору, поки рухається з правого краю на лівий. Попри те, що можна було б змінити властивість {{cssxref("font-size")}}, зміна будь-яких властивостей, що впливають на рамкову модель, негативно впливає на продуктивність. Замість цього обгорнімо це слово в {{htmlelement("span")}}, а тоді масштабуймо та призначмо колір окремо. Це потребує додавання другої анімації, що впливає лише на ``: ```css -75% { - font-size: 300%; - margin-left: 25%; - width: 150%; +@keyframes grow-shrink { + 25%, + 75% { + scale: 100%; + } + 50% { + scale: 200%; + color: magenta; + } } ``` @@ -167,38 +172,54 @@ p { ```css p { animation-duration: 3s; - animation-name: slidein; + animation-name: slide-in; +} + +p span { + display: inline-block; + animation-duration: 3s; + animation-name: grow-shrink; } -@keyframes slidein { +@keyframes slide-in { from { - margin-left: 100%; - width: 300%; + translate: 150vw 0; + scale: 200% 1; + } + to { + translate: 0 0; + scale: 100% 1; } +} +@keyframes grow-shrink { + 25%, 75% { - font-size: 300%; - margin-left: 25%; - width: 150%; + scale: 100%; } - to { - margin-left: 0%; - width: 100%; + 50% { + scale: 200%; + color: magenta; } } ``` +Додано {{htmlelement("span")}} навколо "вслухаєшся": + ```html- Коли лежиш в полі лицем до неба і вслухаєшся в многоголосу тишу полів, то - помічаєш, що в ній щось є не земне, а небесне. + Коли лежиш в полі лицем до неба і вслухаєшся в многоголосу тишу + полів, то помічаєш, що в ній щось є не земне, а небесне.
``` Такий код каже браузерові, що на 75% послідовності анімації заголовок повинен мати лівий зовнішній відступ 25%, а ширину – 150%. -> **Примітка:** Аби побачити анімацію – перезавантажте сторінку. +Це каже браузерові, що це слово повинно бути звичайним для перших і останніх 25% анімації, але ставати рожевим під час збільшення та зменшення посередині. Властивість {{cssxref("display")}} для `` задана з `inline-block`, оскільки властивості `transform` не впливають на незаміщений {{Glossary("inline-level content", "вміст рядного рівня")}}. + +> [!NOTE] +> Аби побачити анімацію – перезавантажте сторінку. {{EmbedLiveSample("dodavannia-ishche-odnoho-kliuchovoho-freimu","100%","250")}} @@ -209,28 +230,26 @@ p { ```css p { animation-duration: 3s; - animation-name: slidein; + animation-name: slide-in; animation-iteration-count: infinite; } ``` -Додавши це до наявного коду: - -```css -@keyframes slidein { +```css hidden +@keyframes slide-in { from { - margin-left: 100%; - width: 300%; + translate: 150vw 0; + scale: 200% 1; } to { - margin-left: 0%; - width: 100%; + translate: 0 0; + scale: 100% 1; } } ``` -```html +```html hiddenКоли лежиш в полі лицем до неба і вслухаєшся в многоголосу тишу полів, то помічаєш, що в ній щось є не земне, а небесне. @@ -246,29 +265,27 @@ p { ```css p { animation-duration: 3s; - animation-name: slidein; + animation-name: slide-in; animation-iteration-count: infinite; animation-direction: alternate; } ``` -І – решта коду: - -```css -@keyframes slidein { +```css hidden +@keyframes slide-in { from { - margin-left: 100%; - width: 300%; + translate: 150vw 0; + scale: 200% 1; } to { - margin-left: 0%; - width: 100%; + translate: 0 0; + scale: 100% 1; } } ``` -```html +```html hidden
Коли лежиш в полі лицем до неба і вслухаєшся в многоголосу тишу полів, то помічаєш, що в ній щось є не земне, а небесне. @@ -283,27 +300,27 @@ p { Змінімо приклад з ковзанням тексту, аби вивести певну інформацію про кожну подію анімації, що спрацьовує, аби побачити, як ці події працюють. -#### Додавання CSS - -Почнімо з CSS для анімації. Ця анімація триватиме 3 секунди, зватиметься "slidein", повториться 3 рази, щоразу зі зміною напряму. В {{cssxref("@keyframes")}} width і margin-left змінюються, аби змусити елемент ковзати екраном. +Додана та сама анімація ключових кадрів, що і в попередньому прикладі. Ця анімація триватиме 3 секунди, зватиметься "slide-in", повторюватиметься 3 рази, і кожного разу буде рухатися в протилежному напрямку. У {{cssxref("@keyframes")}} масштаб і переклад маніпулюються вздовж осі абсцис, щоб змусити елемент ковзати по екрану. ```css -.slidein { +.slide-in { animation-duration: 3s; - animation-name: slidein; + animation-name: slide-in; animation-iteration-count: 3; animation-direction: alternate; } +``` -@keyframes slidein { +```css hidden +@keyframes slide-in { from { - margin-left: 100%; - width: 300%; + translate: 150vw 0; + scale: 200% 1; } to { - margin-left: 0%; - width: 100%; + translate: 0 0; + scale: 100% 1; } } ``` @@ -313,15 +330,15 @@ p { Застосуймо код JavaScript для слухання всіх трьох можливих подій анімації. Код нижче налаштовує слухачів подій; він викликається, коли документ завантажився, щоб усе приготувати. ```js -const element = document.getElementById("watchme"); +const element = document.getElementById("watch-me"); element.addEventListener("animationstart", listener, false); element.addEventListener("animationend", listener, false); element.addEventListener("animationiteration", listener, false); -element.className = "slidein"; +element.className = "slide-in"; ``` -Це вельми стандартний код; подробиці про те, як він працює, можна знайти в документації {{domxref("eventTarget.addEventListener()")}}. Останнє, що робить цей код – присвоєння `class` елемента, що анімується, значення "slidein"; це робиться, щоб почати анімацію. +Це вельми стандартний код; подробиці про те, як він працює, можна знайти в документації {{domxref("eventTarget.addEventListener()")}}. Останнє, що робить цей код – присвоєння `class` елемента, що анімується, значення "slide-in"; це робиться, щоб почати анімацію. Чому? Бо подія `animationstart` спрацьовує, щойно почалась анімація, а в нашому випадку це відбувається до спрацювання нашого коду. Тож почнімо анімацію самі, встановивши клас елемента зі стилем, що, зрештою, анімується. @@ -361,7 +378,7 @@ function listener(event) { Заради повноти – ось HTML, що виводить вміст сторінки, включно зі списком, до якого сценарій вставляє інформацію про отримані події: ```html -
Цей приклад демонструє, як використовувати анімації CSS, аби елементи
H1 рухались по сторінці.
@@ -375,7 +392,8 @@ function listener(event) {
І ось – справжній вивід.
-> **Примітка:** Аби побачити анімацію – перезавантажте сторінку.
+> [!NOTE]
+> Аби побачити анімацію – перезавантажте сторінку.
{{EmbedLiveSample('vykorystannia-podii-animatsii', '600', '300')}}
@@ -410,7 +428,7 @@ HTML тут містить два елементи {{htmlelement("p")}} з {{htm
Це інший абзац, потрібний для того, щоб показати, що
- display: none; застосовується й вилучається до вищезазначеного
+ display: none; застосовується й вилучається до вищезазначеного
<div> . Якби змінювалася лише його opacity,
він завжди займав би місце в DOM.