diff options
Diffstat (limited to 'files/uk/web/css/css_animations/using_css_animations/index.html')
| -rw-r--r-- | files/uk/web/css/css_animations/using_css_animations/index.html | 357 |
1 files changed, 357 insertions, 0 deletions
diff --git a/files/uk/web/css/css_animations/using_css_animations/index.html b/files/uk/web/css/css_animations/using_css_animations/index.html new file mode 100644 index 0000000000..f8b8466ef4 --- /dev/null +++ b/files/uk/web/css/css_animations/using_css_animations/index.html @@ -0,0 +1,357 @@ +--- +title: Використання CSS анімацій +slug: Web/CSS/CSS_Animations/Використання_CSS_анімацій +tags: + - CSS Animations + - Довідка +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +<p>{{SeeCompatTable}}{{CSSRef}}</p> + +<p><span class="seoSummary"><strong>CSS анімації</strong> роблять можливим анімацію переходів (<em>transitions</em>) з однєї конфігурації CSS стилю до іншої.</span> Анімації складаються з двох компонентів, а власне - стилю, котрий описує CSS анімацію та набір ключових кадрів (<em>keyframes</em>), які задають початковий та кінцевий стан стилю анімації, а також є можливим задання точок проміжного стану.</p> + +<p>В CSS анімацій є три ключові переваги перед традиційними скриптовими техніками анімації:</p> + +<ol> + <li>Вони легкі у використанні для простих анімацій; ви можете створити їх навіть без знань JavaScript.</li> + <li>Анімації добре функціонують, навіть при помірному навантаженні на систему. Прості анімації на JavaScript можуть працювати не дуже добре (в разі, якщо вони не ідеально зроблені). Движок рендера може використовувати техніку пропуску кадрів та інші засоби для підтримки гладкої анімації.</li> + <li>Надаючи таким чином браузеру контроль над послідовністю анімації ви надаєте можливість брауцзеру оптимізувати свою роботу та ефективність, наприклад, завдяки зупинці анімації у вкладках, які не є відкриті для перегляду.</li> +</ol> + +<h2 id="Конфігурування_анімації">Конфігурування анімації</h2> + +<p>Щоб створити CSS-анімаційну послідвність, ви стилізуєте анімований елемент {{ cssxref("animation") }} властивістю чи її підвластивостями. Це дозвоялє вам коригувати таймінг, тривалість та інші деталі анімації згідно з вашими потребами. Це <strong>не</strong> конфігурує актуальний вигляд анімації, яка здійснюється проходом через {{ cssxref("@keyframes") }} at-правила, як це описано в {{ anch("Визначення послідовності анімації через ключові кадри") }} нижче.</p> + +<p>Підвластивостями властивості {{ cssxref("animation") }} є:</p> + +<dl> + <dt>{{ cssxref("animation-delay") }}</dt> + <dd>Змінює час затримки між часом з моменту завантаження елемента та початком анімаційної послідовності.</dd> + <dt>{{ cssxref("animation-direction") }}</dt> + <dd>Визначає зміну напрямку анімації та його чергування в залежності від кількості проходів анімації, а також може задавати повернення в початковий стан і починати прохід заново.</dd> + <dt>{{ cssxref("animation-duration") }}</dt> + <dd>Визначає тривалість циклу анімації.</dd> + <dt>{{ cssxref("animation-iteration-count") }}</dt> + <dd>Визначає кількість проходів (повторів) анімації; ви можете також обрати значення <strong><em><code>infinite</code></em></strong> для нескінченного повтору анімації.</dd> + <dt>{{ cssxref("animation-name") }}</dt> + <dd>Задає ім'я для анімації {{ cssxref("@keyframes") }} через at-правило, яке описує анімаційні ключові кадри.</dd> + <dt>{{ cssxref("animation-play-state") }}</dt> + <dd>Дозволяє вам призупиняти та відновлювати анімацію.</dd> + <dt>{{ cssxref("animation-timing-function") }}</dt> + <dd>Задає конфігурацію таймінгу анімації; інакше кажучи, як саме буде анімація робити прохід через ключові кадри, це можливо завдяки кривим прискорення.</dd> + <dt>{{ cssxref("animation-fill-mode") }}</dt> + <dd>Визначає, які значення будуть застосовані для анімації перед початком та після її закінчення.</dd> +</dl> + +<h2 id="Визначення_послідовності_анімації_через_ключові_кадри">Визначення послідовності анімації через ключові кадри</h2> + +<p>Опісля того, як ви задали анімації таймінг, вам потрібно задати вигляд анімації. Це робиться завдяки одному чи більше ключовому кадру шляхом застосування at-правила {{ cssxref("@keyframes") }}. Кожен ключовий кадр описує, як саме повинен відображатися анімований елемент у певний момент під час проходження анімаційної послідовності.</p> + +<p>Після того, як таймінг анімації був заданий в CSS стилі, який конгфігурує анімацію, ключові кадри використовують {{ cssxref("percentage") }} для відображення моменту під час анімації, в якому буде розміщений той чи інший ключовий кадр. 0% вказує на сам початок анімаціїйної послідовності, тоді як 100% вказує на завершальний етап анімації. Оскільки ці два моменти є такими важливими, вони мають свої спеціальні імена: <em><strong><code>from</code></strong></em> і <em><strong><code>to</code></strong></em><code> відповідно</code>. Обидва ці імені є необов'язковими. Якщо <em><strong><code>from</code></strong></em>/<code>0%</code> чи <em><strong><code>to</code></strong></em>/<code>100%</code> не є задано, то браузер починає чи зупиняє анімацію використовуючи середньообраховані значення всіх атрибутів.</p> + +<p>Ви також можете на свій розсуд додавати проміжні кадри до анімації, аби описати стан анімації в проміжні періоди.</p> + +<h2 id="Приклади">Приклади</h2> + +<div class="note"><strong>Примітка:</strong> Подані приклади не використовують вендорних префіксів. WebKit-браузери та старіші версії інших браузерів можуть потребувати цих префіксів; приклади, на які ви можете клацнути для перегляду у вашому браузері також включають <code>-webkit</code>-префіксовані версії.</div> + +<h3 id="Текст_що_ковзає_у_вікні_браузера">Текст, що ковзає у вікні браузера</h3> + +<p>Цей простий приклад стилізує елемент {{ HTMLElement("p") }} так, що текст "зісковзує" в вікно браузера з-поза його правого краю.</p> + +<p>Майте на увазі, що такі анімації можуть робити сторінку ширшою, аніж вікно браузера. Аби уникнути такої проблеми, потрібно помістити анімований елемент в контейнер і встановити для останнього {{cssxref("overflow")}}<code>:hidden</code>.</p> + +<pre class="brush: css">p { + animation-duration: 3s; + animation-name: slidein; +} + +@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<p>В цьому прикладі стиль для {{ HTMLElement("p") }}-елемента визначає, що тривалість анімації становить 3 секунди від початку до кінця, використовуючи властивість {{ cssxref("animation-duration") }}, а також присвоює ім'я цій анімації, яке використано у ключових кадрах {{ cssxref("@keyframes") }} . Їхні at-правила визначили, що це ключові кадри для анімації, яка називається “slidein”.</p> + +<p>Якщо нам потрібно ще якусь додаткову стилізацію елемента {{ HTMLElement("p") }} для відобаження в браузерах, які не підтримують CSS анімацій, то ми б її включили туди ж; однак, в цьому випадку ми не потребуємо додаткової стилізації, крім анімації елемента.</p> + +<p>Ключові кадри визначені через at-правила {{ cssxref("@keyframes") }}. В даному випадку є лише два ключових кадри. Перший ключовий кадр наступає в 0% (вжито спеціальне ім'я <em><strong><code>from</code></strong></em>). Тут, ми змінюємо лівий маргін елемента як 100% (тобто це відраховується, як відстань від правого краю контейнера), і встановили 300% ширини для елемента (Втричі ширше за контейнер). Завдяки цьому на першому ключовому кадрі анімований елемент буде знаходитися поза межами контейнера (вікна браузера).</p> + +<p>Другий ключовий кадр (він же завершальний) розміщений на завершенні анімації, 100% (спеціальне ім'я <strong><em><code>to</code></em></strong>). Лівий маргін встановлено як 0% і ширину елемента ми встановили як 100%. Це спричиняє "приклеювання" елемента до лівого краю вікна браузера.</p> + +<pre class="brush: html"><p>The Caterpillar and Alice looked at each other for some time in silence: +at last the Caterpillar took the hookah out of its mouth, and addressed +her in a languid, sleepy voice.</p> +</pre> + +<p>(Перезавантажте сторінку, аби побачити анімацію, або ж клікніть на кнопку CodePen, щоб побачити анімацію в середовищі CodePen)</p> + +<p>{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}</p> + +<h3 id="Додавання_інших_ключових_кадрів">Додавання інших ключових кадрів</h3> + +<p>Давайте додамо ще один ключовий кадр до анімації з попереднього прикладу. Припустимо, нам потрібно трішки збільшити шрифт, коли текст рухається вліво, а потім ми його повертаємо до попередніх параметрів. Це просто, як додавання ось такого ключового кадру:</p> + +<pre class="brush: css">75% { + font-size: 300%; + margin-left: 25%; + width: 150%; +} +</pre> + +<pre class="brush: css hidden">p { + animation-duration: 3s; + animation-name: slidein; +} + +@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + 75% { + font-size: 300%; + margin-left: 25%; + width: 150%; + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<pre class="brush: html hidden"><p>The Caterpillar and Alice looked at each other for some time in silence: +at last the Caterpillar took the hookah out of its mouth, and addressed +her in a languid, sleepy voice.</p> +</pre> + +<p>Це повідомляє браузеру, що елемент, при виконанні 75% анімації, повинен мати лівий маргін 25% і ширину 150%.</p> + +<p>(Перезавантажте сторінку, аби побачити анімацію, або ж клікніть на конпку CodePen, щоб побачити анімацію в середовищі CodePen)</p> + +<p>{{EmbedLiveSample("Adding_another_keyframe","100%","250")}}</p> + +<h3 id="Making_it_repeat">Making it repeat</h3> + +<p>Якщо вам потрібно, аби анімація повторювалась, просто використайте властивість {{ cssxref("animation-iteration-count") }} , щоб зазначити, скільки разів повинна повторитися анімація. В даному випадку давайте використаємо значення <em><strong><code>infinite</code></strong></em> для отримання постійної анімації:</p> + +<pre class="brush: css">p { + animation-duration: 3s; + animation-name: slidein; + animation-iteration-count: infinite; +} +</pre> + +<pre class="brush: css hidden">@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<pre class="brush: html hidden"><p>The Caterpillar and Alice looked at each other for some time in silence: +at last the Caterpillar took the hookah out of its mouth, and addressed +her in a languid, sleepy voice.</p> +</pre> + +<p>{{EmbedLiveSample("Making_it_repeat","100%","250")}}</p> + +<h3 id="Змінюємо_напрямки_анімації">Змінюємо напрямки анімації</h3> + +<p>Отже, анімація повторювана, але це виглядає дивно: текст по завершенню циклу, з початком нового знову стрибає вбік. Отже нам треба зробити, аби текст плавно повертався назад, на початкову позицію. Це просто: прописуємо у {{ cssxref("animation-direction") }} значення <em><strong><code>alternate</code></strong></em>:</p> + +<pre class="brush: css">p { + animation-duration: 3s; + animation-name: slidein; + animation-iteration-count: infinite; + animation-direction: alternate; +} +</pre> + +<pre class="brush: css hidden">@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<pre class="brush: html hidden"><p>The Caterpillar and Alice looked at each other for some time in silence: +at last the Caterpillar took the hookah out of its mouth, and addressed +her in a languid, sleepy voice.</p> +</pre> + +<p>{{EmbedLiveSample("Making_it_move_back_and_forth","100%","250")}}</p> + +<h3 id="Використання_скорочень_для_правил_анімації">Використання скорочень для правил анімації</h3> + +<p>{{ cssxref("animation") }} скорочення є вигідним для економії місця. От, для прикладу, правила анімації, які ми вже використали в статті:</p> + +<pre class="brush: css">p { + animation-duration: 3s; + animation-name: slidein; + animation-iteration-count: infinite; + animation-direction: alternate; +} +</pre> + +<p>Їх можна замінити ось таким чином</p> + +<pre>p { + animation: 3s infinite alternate slideIn; +}</pre> + +<div class="note"> +<p><strong>Примітка</strong>: Ви можете дізнатися про це більше на сторінці довідки {{ cssxref("animation") }} :</p> +</div> + +<h3 id="Задання_множинних_значень_властивостей_анімації">Задання множинних значень властивостей анімації</h3> + +<p>Нескорочені значення CSS анімації можуть приймати множинні значення, розділені комами — таку особливість можна використати, якщо вам потрібно задати множинні анімації єдиним набором правил і відповідно задати різні тривалості, повтори і так далі для різних анімацій. Давайте глянемо на кілька швидких прикладів, аби пояснити різні зміни:</p> + +<p>В першому прикладі у нас є набір з трьох різних імен анімації, але одна й та ж тривалість і кількість повторів:</p> + +<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce; +animation-duration: 3s; +animation-iteration-count: 1;</pre> + +<p>В другому прикладі в нас є набір з 3х значень для кожної властивості. В цьому випадку кожна анімація буде здійснюватися з відповідними значеннями, згідно з їх розміщенням у властивостях, то ж, приміром, <code>fadeInOut</code> має тривалість в 2.5s і кількість повторів 2, і т.д..</p> + +<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce; +animation-duration: 2.5s, 5s, 1s; +animation-iteration-count: 2, 1, 5;</pre> + +<p>У цьому третьому випадку є три різні анімації, але лише дві різні тривалості та кількості повторів. У таких випадках наборів значень недостатньо, то ж кожна анімація отримає свій набір значень шляхом перебору від початку до кінця. Наприклад, fadeInOut отримає тривалість в 2.5s і moveLeft300px матиме тривалість 5s. Набори значень на цьому закінчились, тому все починається з початку і третя анімація bounce отримає тривалість знову в 2.5s. Кількість повторів (та й будь-які інші значення властивостей, які ви задасте) будуть присвоєні такими самим чином.</p> + +<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce; +animation-duration: 2.5s, 5s; +animation-iteration-count: 2, 1;</pre> + +<h3 id="Використання_подій_анімації">Використання подій анімації</h3> + +<p>Ви можете отримати додатковий контроль над анімаціями, як і корисну інформацію про них шляхом використання подій анімації. Ці події, представлені об'єктом {{ domxref("AnimationEvent") }}, можуть бути використані, аби визначити, коли починаються, закінчуються і починають новий повтор різні анімації. Кожна подія містить час, о котрій вона сталась та ім'я анімації, яка її запустила.</p> + +<p>Зараз ми змінимо приклад з ковзаючим текстом, аби вивести певну інформацію про кожну анімаційну подію, тобто її час, то ж ми можемо розібратися, як вони працюють.</p> + +<h4 id="Додавання_CSS">Додавання CSS</h4> + +<p>Починаємо зі створення CSS для анімації. Дана анімація триватиме 3 секунди, назвемо її “slidein”, задамо повтор 3 рази, і напрям анімації <em><strong>alternate</strong></em> кожного разу. В {{ cssxref("@keyframes") }}, ширина і лівий маргін змінюються, щоб текст ковзав по екрану.</p> + +<pre class="brush: css">.slidein { + animation-duration: 3s; + animation-name: slidein; + animation-iteration-count: 3; + animation-direction: alternate; +} + +@keyframes slidein { + from { + margin-left:100%; + width:300% + } + + to { + margin-left:0%; + width:100%; + } +}</pre> + +<h4 id="Встановлення_animation_event_listeners_-_прослуховування_подій_анімації">Встановлення animation event listeners - прослуховування подій анімації</h4> + +<p>Ми використаємо код JavaScript для прослуховування всіх трьох можливих подій анімації. Даний код задає наші <strong>event listeners</strong>; ми викликаємо його, коли документ вперше завантажений, для того, щоб отримати впорядковані дані.</p> + +<pre class="brush: js">var e = document.getElementById("watchme"); +e.addEventListener("animationstart", listener, false); +e.addEventListener("animationend", listener, false); +e.addEventListener("animationiteration", listener, false); + +e.className = "slidein"; +</pre> + +<p>Це цілком звичайний код, аби дізнатися більше, ви можете звіритися з документацією {{ domxref("eventTarget.addEventListener()") }}. Останнє, що робить код - він задає клас анімованого елемента як “slidein”; це нам потрібно для запуску анімації.</p> + +<p>Чому? Тому що подія <strong><code>animationstart</code></strong> запускається одразу ж, як стартує анімація; в даному випадку це стається до того, як починає діяти наш код. То ж ми починаємо анімацію самі, задаючи клас елементу для стиля, котрий буде анімований по факту.</p> + +<h4 id="Отримання_подій">Отримання подій</h4> + +<p>Події надсилаються до функції <em><code>listener()</code></em>, як це показано нижче.</p> + +<pre class="brush: js">function listener(e) { + var l = document.createElement("li"); + switch(e.type) { + case "animationstart": + l.innerHTML = "Started: elapsed time is " + e.elapsedTime; + break; + case "animationend": + l.innerHTML = "Ended: elapsed time is " + e.elapsedTime; + break; + case "animationiteration": + l.innerHTML = "New loop started at time " + e.elapsedTime; + break; + } + document.getElementById("output").appendChild(l); +} +</pre> + +<p>Даний код також дуже простий. Він просто дивиться в {{ domxref("event.type") }}, аби визначити, який власне тип події анімації трапився, тоді додає відповідну примітку в {{ HTMLElement("ul") }} (невпорядкований список), який ми використовуємо для виводу звіту про ці події.</p> + +<p>Звіт після завершення роботи буде виглядати якось от так:</p> + +<ul> + <li>Started: elapsed time is 0</li> + <li>New loop started at time 3.01200008392334</li> + <li>New loop started at time 6.00600004196167</li> + <li>Ended: elapsed time is 9.234000205993652</li> +</ul> + +<p>Зауважте, що часи подій досить точні щодо тих, які ми очікували відповідно до таймінгу, який ми задали, коли створювали анімацію. Візьміть до уваги також і те, що після завершального проходу анімації подія <strong><code>animationiteration</code></strong> не була надіслана; натомість надіслало подію <strong><code>animationend</code></strong>.</p> + +<h4 id="HTML">HTML</h4> + +<p>Чисто для повної завершеності огляду ось код, який відображає контент сторіки, включно зі списком звіту про події анімації, який створився завдяки вищеописаному скрипту:</p> + +<pre class="brush: html"><h1 id="watchme">Watch me move</h1> +<p> + This example shows how to use CSS animations to make <code>H1</code> + elements move across the page. +</p> +<p> + In addition, we output some text each time an animation event fires, + so you can see them in action. +</p> +<ul id="output"> +</ul> +</body> +</pre> + +<p>{{EmbedLiveSample('Using_animation_events', '600', '300')}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li> + <li><a href="/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support" title="en/CSS/CSS animations/Detecting CSS animation support">Визначення підтримки CSS анімації</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Використання CSS transitions</a></li> +</ul> |