Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update(CSS): web/css/css_animations/using_css_animations #3701

Merged
merged 2 commits into from
Dec 24, 2024
Merged

update(CSS): web/css/css_animations/using_css_animations #3701

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d35106b
update(CSS): web/css/css_animations/using_css_animations
undead404 Dec 19, 2024
d81e8f6
Update files/uk/web/css/css_animations/using_css_animations/index.md
undead404 Dec 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
168 changes: 93 additions & 75 deletions files/uk/web/css/css_animations/using_css_animations/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,15 @@ page-type: guide
- : Задає тривалість, протягом якої анімація завершує один цикл.
- {{cssxref("animation-fill-mode")}}
- : Задає те, як анімація застосовує стилі до своєї цілі, до і після її виконання.
> [!NOTE]
> У разі анімації в режимі заповнення [вперед](/uk/docs/Web/CSS/animation-fill-mode#forwards) – анімовані властивості поводяться так, ніби включені в значення властивості [`will-change`](/uk/docs/Web/CSS/will-change). Якщо під час анімації було створено новий контекст нагромадження, то цільовий елемент зберігає цей контекст після завершення анімації.
- {{cssxref("animation-iteration-count")}}
- : Задає те, скільки разів повинна повторитися анімація.
- {{cssxref("animation-name")}}
- : Задає ім'я директиви {{cssxref("@keyframes")}}, котра описує ключові кадри анімації.
- {{cssxref("animation-play-state")}}
- : Задає паузу чи відновлення анімації.
- {{cssxref("animation-timeline")}} {{experimental_inline}}
- {{cssxref("animation-timeline")}}
- : Задає часову шкалу, що використовується для контролю прогресу анімації CSS.
- {{cssxref("animation-timing-function")}}
- : Задає те, як анімація переходить між ключовими кадрами, шляхом встановлення кривих прискорення.
Expand All @@ -56,7 +58,7 @@ page-type: guide
```css
p {
animation-duration: 3s;
animation-name: slidein;
animation-name: slide-in;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Expand All @@ -66,7 +68,7 @@ p {

```css
p {
animation: 3s infinite alternate slidein;
animation: 3s infinite alternate slide-in;
}
```

Expand Down Expand Up @@ -104,40 +106,37 @@ animation-iteration-count: 2, 1;

## Приклади

> **Примітка:** Частина старих браузерів (до 2017 року) могли потребувати префіксів; живі приклади, котрі для перегляду треба клацнути, включають синтаксис із префіксом `-webkit`.
> [!NOTE]
> Частина старих браузерів (до 2017 року) могли потребувати префіксів; живі приклади, котрі для перегляду треба клацнути, включають синтаксис із префіксом `-webkit`.

### Текст, що ковзає вікном браузера

Цей зразок так оздоблює елемент {{HTMLElement("p")}}, що текст ковзає до і від правого краю вікна браузера.

Зверніть увагу, що анімації штибу цієї можуть призвести до того, що сторінка стане ширшою за вікно браузера. Аби цього уникнути цієї проблеми, слід помістити анімований елемент у контейнер, і цьому контейнеру задати {{cssxref("overflow")}}`:hidden`.
Цей базовий приклад оздоблює елемент {{HTMLElement("p")}} за допомогою властивостей переходу {{cssxref("translate")}} і {{cssxref("scale")}}, щоб текст заїжджав з-за правого краю вікна браузера.

```css
p {
animation-duration: 3s;
animation-name: slidein;
animation-name: slide-in;
}

@keyframes slidein {
@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;
}
}
```

В цьому прикладі стиль елемента {{HTMLElement("p")}} задає, що виконання анімації від її початку до завершення повинно зайняти 3 секунди, за допомогою властивості {{cssxref("animation-duration")}}, і що ім'я директиви {{cssxref("@keyframes")}}, котра визначає ключові фрейми для послідовності анімації, – "slidein".

Якби ми хотіли якогось специфічного оздоблення елемента {{HTMLElement("p")}}, що з'явилось би у браузерах, котрі не підтримують анімації CSS, то включили б його і сюди; проте в цьому випадку не хочемо жодного оздоблення, крім самого ефекту анімації.
В цьому прикладі стиль елемента {{HTMLElement("p")}} задає, що виконання анімації від її початку до завершення повинно зайняти 3 секунди, за допомогою властивості {{cssxref("animation-duration")}}, і що ім'я директиви {{cssxref("@keyframes")}}, котра визначає ключові фрейми для послідовності анімації, – `slide-in`.

Ключові фрейми визначаються за допомогою директиви {{cssxref("@keyframes")}}. В цьому випадку є лишень два ключові фрейми. Перший трапляється на 0% (використовує псевдонім `from`). Тут ми задаємо лівий зовнішній відступ елемента 100% (тобто аж до правого краю контейнерного елемента), а ширину елемента 300% (чи втричі більшою за ширину контейнерного елемента). Це призводить до того, що перший фрейм анімації має заголовок на правому краю вікна браузера.
У цьому випадку є лише два ключові кадри. Перший відбувається на `0%` (за допомогою псевдоніма `from`). Тут ми налаштовуємо властивість {{cssxref("translate")}} елемента на `150vw` (тобто за межами правого краю елемента-контейнера) і властивість {{cssxref("scale")}} елемента на `200%` (або вдвічі більше його типового розміру), через що абзац стає удвічі ширшим за свій контейнерний блок `<body>`. Це призводить до того, що перший кадр анімації має заголовок, нанесений за правим краєм вікна браузера.

Другий (і фінальний) ключовий фрейм трапляється на 100% (використовує псевдонім `to`). Лівий зовнішній відступ – 0%, а ширина елемента – 100%. Це призводить до того, що заголовок закінчує свою анімацію на рівні лівого краю області вмісту.
Другий ключовий кадр відбувається на `100%` (за допомогою псевдоніма `to`). Властивість {{cssxref("translate")}} задана зі значенням `0%`, а властивість {{cssxref("scale")}} – зі значенням `1`, тобто `100%`. Це змушує заголовок завершити анімацію в своєму усталеному стані, прилягаючи до лівого краю області вмісту.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Милозвучність прийменників в/у

Перед словами, що починаються на в, ф або збігом приголосних із в, ф пишемо у: "у" своєму
STYLE/EUPHONY_PREP_V_U: Милозвучність прийменників в/у

...100%. Це змушує заголовок завершити анімацію в своєму усталеному стані, прилягаючи до лівог...

Варіанти заміни

  • у

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Милозвучність прийменників в/у

Перед словами, що починаються на в, ф або збігом приголосних із в, ф пишемо у: "у" своєму
STYLE/EUPHONY_PREP_V_U: Милозвучність прийменників в/у

...100%. Це змушує заголовок завершити анімацію в своєму усталеному стані, прилягаючи до лівог...

Варіанти заміни

  • у


```html
<p>
Expand All @@ -146,19 +145,25 @@ p {
</p>
```

> **Примітка:** Аби побачити анімацію – перезавантажте сторінку.
> [!NOTE]
> Аби побачити анімацію – перезавантажте сторінку.

{{EmbedLiveSample("tekst-shcho-kovzaie-viknom-brauzera","100%","250")}}

### Додавання іще одного ключового фрейму
### Додавання іще однієї анімації ключових кадрів

Додаймо до анімації попереднього прикладу іще один ключовий фрейм. Скажімо, хочеться, аби розмір шрифту збільшувався при русі справа наліво, а тоді зменшувався назад. Для цього достатньо додати такий ключовий фрейм:
Додаймо до анімації попереднього прикладу ще один ключовий кадр. Скажімо, що хочемо, аби дієслово "вслухаєшся" ставало рожевим, збільшувалося, а потім знову зменшувалося до свого початкового розміру й кольору, поки рухається з правого краю на лівий. Попри те, що можна було б змінити властивість {{cssxref("font-size")}}, зміна будь-яких властивостей, що впливають на рамкову модель, негативно впливає на продуктивність. Замість цього обгорнімо це слово в {{htmlelement("span")}}, а тоді масштабуймо та призначмо колір окремо. Це потребує додавання другої анімації, що впливає лише на `<span>`:

```css
75% {
font-size: 300%;
margin-left: 25%;
width: 150%;
@keyframes grow-shrink {
25%,
75% {
scale: 100%;
}
50% {
scale: 200%;
color: magenta;
}
}
```

Expand All @@ -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
<p>
Коли лежиш в полі лицем до неба і вслухаєшся в многоголосу тишу полів, то
помічаєш, що в ній щось є не земне, а небесне.
Коли лежиш в полі лицем до неба і <span>вслухаєшся</span> в многоголосу тишу
полів, то помічаєш, що в ній щось є не земне, а небесне.
</p>
```

Такий код каже браузерові, що на 75% послідовності анімації заголовок повинен мати лівий зовнішній відступ 25%, а ширину – 150%.

> **Примітка:** Аби побачити анімацію – перезавантажте сторінку.
Це каже браузерові, що це слово повинно бути звичайним для перших і останніх 25% анімації, але ставати рожевим під час збільшення та зменшення посередині. Властивість {{cssxref("display")}} для `<span>` задана з `inline-block`, оскільки властивості `transform` не впливають на незаміщений {{Glossary("inline-level content", "вміст рядного рівня")}}.

> [!NOTE]
> Аби побачити анімацію – перезавантажте сторінку.

{{EmbedLiveSample("dodavannia-ishche-odnoho-kliuchovoho-freimu","100%","250")}}

Expand All @@ -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
<p>
Коли лежиш в полі лицем до неба і вслухаєшся в многоголосу тишу полів, то
помічаєш, що в ній щось є не земне, а небесне.
Expand All @@ -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
<p>
Коли лежиш в полі лицем до неба і вслухаєшся в многоголосу тишу полів, то
помічаєш, що в ній щось є не земне, а небесне.
Expand All @@ -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;
}
}
```
Expand All @@ -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` спрацьовує, щойно почалась анімація, а в нашому випадку це відбувається до спрацювання нашого коду. Тож почнімо анімацію самі, встановивши клас елемента зі стилем, що, зрештою, анімується.

Expand Down Expand Up @@ -361,7 +378,7 @@ function listener(event) {
Заради повноти – ось HTML, що виводить вміст сторінки, включно зі списком, до якого сценарій вставляє інформацію про отримані події:

```html
<h1 id="watchme">Дивіться, як я рухаюсь</h1>
<h1 id="watch-me">Дивіться, як я рухаюсь</h1>
<p>
Цей приклад демонструє, як використовувати анімації CSS, аби елементи
<code>H1</code> рухались по сторінці.
Expand All @@ -375,7 +392,8 @@ function listener(event) {

І ось – справжній вивід.

> **Примітка:** Аби побачити анімацію – перезавантажте сторінку.
> [!NOTE]
> Аби побачити анімацію – перезавантажте сторінку.

{{EmbedLiveSample('vykorystannia-podii-animatsii', '600', '300')}}

Expand Down Expand Up @@ -410,7 +428,7 @@ HTML тут містить два елементи {{htmlelement("p")}} з {{htm

<p>
Це інший абзац, потрібний для того, щоб показати, що
<code>display: none; </code> застосовується й вилучається до вищезазначеного
<code>display: none;</code> застосовується й вилучається до вищезазначеного
<code>&lt;div&gt; </code>. Якби змінювалася лише його <code>opacity</code>,
він завжди займав би місце в DOM.
</p>
Expand Down Expand Up @@ -504,5 +522,5 @@ function showHide() {
## Дивіться також

- {{domxref("AnimationEvent", "AnimationEvent")}}
- [Поради та хитрощі щодо анімацій CSS](/uk/docs/Web/CSS/CSS_animations/Tips)
- [Застосування переходів CSS](/uk/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)
- [Застосування API вебанімацій](/uk/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
Loading