CSS анімація для найменших. Анімація інтерфейсів за допомогою CSS Animation css приклади

Всі сучасні браузери, окрім IE9, підтримують CSS transitions і CSS animations, які дозволяють реалізувати анімацію. засобами CSSбез залучення JavaScript. Анімація застосовується до будь-яких html-елементів, а також до псевдоелементів :beforeі :after

Підтримка браузерами

IE: 10.0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: -
Android Browser: 44, 4.1 -webkit-
Chrome для Android: 44

Щоб скористатися анімацією у своєму проекті, вам достатньо зробити дві речі:

1. Створити саму анімацію за допомогою ключового слова@keyframes
2. Підключити її до елемента, який треба анімувати, та вказати потрібні властивості.

Правило @keyframes

Правило @keyframesдозволяє створювати анімацію за допомогою ключових кадрів - станів об'єкта у певний момент часу.

Ключові кадри анімації створюються за допомогою ключових слів fromі to(еквівалентні значенням 0% та 100%) або за допомогою процентних пунктів, яких можна задавати скільки завгодно. Також можна комбінувати ключові слова та процентні пункти.

Якщо не заданий початковий ( from, 0%) або кінцевий ( to, 100%) кадр, браузер встановить їм розрахункові значення анимируемых властивостей такими, якими вони були б якби була застосована анімація.

Якщо у двох ключових кадрів будуть однакові селектори, то наступний скасує дію попереднього.

При визначенні анімації відразу після якості @keyframesповинно слідувати ім'я даної анімації (дане ім'я потім має бути зазначено у властивості animation елемента, який буде анімований).

@keyframes move ( from ( transform: translateX(0px); ) 50% ( transform: translateX(130px); ) 100% ( transform: translateX(0px); ) )

Ми створили анімацію, яка працює так:

1. Початок анімації ( fromможна було написати 0%) - положення елемента по осі Х дорівнює 0px;
2. Середина анімації (50%) - положення елемента по осі Х дорівнює 130px;
3. Кінець анімації ( toми використовували 100%) - повертаємо елемент початку анімації, тобто. положення елемента по осі Х дорівнює 0px;

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

Ключові кадри можна групувати:

@keyframes move ( from ( transform: translateX(0px); ) 25%, 50% ( transform: translateX(130px); ) 100% ( transform: translateX(0px); ) )

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

element ( animation-name: animation-1, animation-2; animation-duration: 2s, 4s; )

Підключення анімації до елемента відбувається двома командами animation-nameі animation-duration.

Назва анімації

Властивість animation-nameзадає ім'я анімації. Рекомендується використовувати назву, що відображає суть анімації, при цьому можна використовувати одне слово або кілька, пов'язаних між собою за допомогою пробілу або нижнього підкреслення _.

animation-name: move;

Тимчасова функція

Властивість animation-timing-functionдозволяє встановити спеціальну функцію, що відповідає за швидкість відтворення анімації. Зауважимо, що швидкість відтворення анімації найчастіше нелінійна, тобто. її миттєва швидкість у різних ділянках відрізнятиметься. На даний момент існує кілька вже вбудованих аргументів для цього правила: ease, ease-in, ease-out , ease-in-out, linear , step-start , step-end.

Однак такі функції можна створювати самому. Спеціальна функція cubic-bezier (P1x, P1y, P2x, P2y); приймає чотири аргументи та будує на їх основі криву розподілу значень у процесі анімації. Потренуватися у створенні своїх функцій та подивитися як вони працюють можна на цьому сайті.

І, нарешті, анімацію можна перетворити на набір дискретних значень за допомогою функції steps(кількість кроків, напрямок), як аргументи якої задається кількість її кроків і напрямок, який може приймати значення startабо end .

• ease— функція за замовчуванням, анімація починається повільно, швидко розганяється і сповільнюється в кінці. Відповідає cubic-bezier(0.25,0.1,0.25,1).
• linear- Анімація відбувається рівномірно протягом усього часу, без коливань у швидкості; відповідає cubic-bezier(0,0,1,1).
• ease-inанімація починається повільно, а потім плавно прискорюється в кінці; відповідає cubic-bezier(0.42,0,1,1).
• ease-out- Анімація починається швидко і плавно сповільнюється в кінці; відповідає cubic-bezier(0,0,0.58,1).
• ease-in-out- анімація повільно починається та повільно закінчується; відповідає cubic-bezier(0.42,0,0.58,1).
• cubic-bezier(x1, y1, x2, y2)- див. вище.
• inherit— успадковує цю властивість від батьківського елемента.

Візуальне порівняння

Анімація із затримкою

Властивість animation-delayвизначає затримку до початку відтворення анімації, задається за секунди або мілісекунди. Негативна затримка починає анімацію з певного моменту усередині її циклу, тобто. з часу, зазначеного у затримці. Це дозволяє застосовувати анімацію до кількох елементів із зсувом фази, змінюючи лише час затримки. Якщо ви хочете, щоб анімація почалася з середини, задайте негативну затримку, що дорівнює половині часу, встановленому в animation-duration. Чи не успадковується.

element ( animation-name: animation-1; animation-duration: 2s; animation-delay: 10s; // Перед стартом цієї анімації пройде 10 сек.)

Повторення анімації

Властивість animation-iteration-countдозволяє запустити анімацію кілька разів. Чи не успадковується. Як значення виставляємо будь-яке позитивне значення 1, 2, 3 … і т.д. або infiniteдля нескінченного повторення. Значення 0 або будь-яке від'ємне число видаляють анімацію з програвання.

| 18.02.2016

CSS3 відкриває необмежені можливості перед UI-дизайнерами, і головний плюс полягає в тому, що практично будь-яку ідею можна легко реалізувати та втілити у життя, не вдаючись до використання JavaScript.

Дивно, як прості речі можуть оживити звичайну веб-сторінку, зробити її доступнішою для сприйняття користувачами. Йдеться про CSS3 переходи, за допомогою яких можна дозволяти елементу трансформуватися та змінювати стиль, наприклад, при наведенні курсору. Дев'ять прикладів анімації CSS3, які доступні нижче, допоможуть створити на сайті атмосферу чуйності, а також покращити загальний вигляд сторінки завдяки красивим плавним переходам.

Для більш детального ознайомлення ви можете завантажити архів із файлами.

Усі ефекти працюють з допомогою властивості transition (англ. transition- «Перехід», «перетворення») і псевдокласу: hover, який визначає стиль елемента при наведенні на нього курсора миші (у нашому підручнику). Для наших прикладів ми використали блок div розміром 500×309 пікселів, вихідний колір фону #6d6d6d та тривалість переходу від одного стану до іншого 0,3 секунди.

Body > div ( width: 500px; height: 309px; background: #6d6d6d; -webkit-transition: all 0.3s ease;; -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease; transition: all 0.3s ease; )

1. Зміна кольору під час наведення курсору

Колись реалізація такого ефекту була досить копіткою роботою з математичними обчисленнями певних значень RGB. Зараз достатньо записати стиль CSS, в якому необхідно додати до селектора псевдоклас:hover та задати фоновий колір, який плавно (за 0,3 секунди) замінить собою вихідний колір фону при наведенні курсору на блок:

Color:hover ( background:#53ea93; )

2. Поява рамки

Цікава та яскрава трансформація – внутрішня рамка, що плавно з'являється при наведенні миші. Добре підійде для оздоблення різних кнопок. Щоб досягти такого ефекту, використовуємо псевдоклас:hover та властивість box-shadow з параметром inset (задає тінь усередині елемента). Крім цього, потрібно задати розтягнення тіні (у нашому випадку це 23px) та її колір:

Border:hover ( box-shadow: inset 0 0 0 23px #53ea93; )

3. Свінг

Дана CSS анімація- Виняток, тому що тут властивість transition не використовується. Замість нього ми задіяли:

• @keyframes - базова директива для створення покадрової CSS-анімації, яка дозволяє робити т.з. розкадрування та описувати анімацію у вигляді списку ключових моментів;
• animation та animation-iteration-count - властивості для завдання параметрів анімації (тривалість та швидкість) та кількості циклів (повторів). У разі повтор 1.

4. Згасання

Ефект плавного згасання - це, по суті, нормальна зміна прозорості елемента. Анімація створюється в два етапи: спочатку необхідно встановити початковий стан прозорості 1 – тобто повна непрозорість, після чого вказати її значення при наведенні миші – 0.6:

Fade ( opacity: 1; ) .fade:hover ( opacity: 0.6; )

Для протилежного результату поміняйте значення місцями:

5. Збільшення

Щоб при наведенні курсору блок збільшувався, ми скористаємося властивістю transform і задаємо значення scale(1.2) . При цьому блок збільшиться на 20 відсотків із збереженням своїх пропорцій:

Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )

6. Зменшення

Зменшити елемент так само просто, як збільшити. Якщо в п'ятому пункті для збільшення масштабу нам необхідно було вказати значення більше, ніж 1, то для зменшення блоку ми просто вкажемо значення, яке буде менше одиниці, наприклад, scale(0.7). Тепер при наведенні миші блок пропорційно зменшуватиметься на 30 відсотків від свого початкового розміру:

Shrink:hover ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )

7. Трансформація у коло

Одна з найчастіше використовуваних анімацій - прямокутний елемент, який при наведенні курсору перетворюється на коло. За допомогою властивості CSS border-radius, використаного в парі з: hover і transition, це можна реалізувати без проблем:

Circle:hover ( border-radius: 70%; )

8. Обертання

Кумедний варіант анімації - поворот елемента на певну кількість градусів. Для цього нам знову знадобиться властивість перетворення, але вже з іншим значенням - rotateZ(20deg). За таких параметрів блок буде повернутий на 20 градусів за годинниковою стрілкою щодо осі Z:

Rotate:hover ( -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); )

9. 3D тінь

Думки дизайнерів розходяться в тому, чи доречний цей ефект у флет-дизайні. Тим не менш, ця CSS3 анімація є дуже оригінальною і також використовується на веб-сторінках. Добиватимемося тривимірного ефекту будемо за допомогою вже знайомих нам властивостей box-shadow(Створить багатошарову тінь) і transform з параметром translateX(-7px) (забезпечить зсув блоку по горизонталі вліво на 7 пікселів):

Threed:hover ( box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px -7px);transform: translateX(-7px);

Підтримка браузерами

На сьогоднішній день властивість transition підтримується такими браузерами:

Інші властивості, використані в даних прикладах, такі як transform, box-shadow і т. д., також підтримуються майже всіма сучасними браузерами. Однак, якщо ви збираєтеся використовувати ці ідеї для своїх проектів, настійно рекомендуємо перевіряти ще раз кросбраузерність.

Сподіваємося, що ці приклади анімації CSS3 були корисними для вас. Бажаємо творчих успіхів!

CSS3-анімаціянадає сайтам динамічності. Вона пожвавлює веб-сторінки, покращуючи взаємодію з користувачем. На відміну від CSS3-переходів, створення анімації базується на ключових кадрах, які дозволяють автоматично відтворювати та повторювати ефекти протягом заданого часу, а також зупиняти анімацію всередині циклу.

CSS3-анімація може застосовуватися практично для всіх html-елементів, а також для псевдоелементів before і after. Список анімованих властивостей наведено на сторінці. При створенні анімації не варто забувати про можливих проблемахз продуктивністю, оскільки зміна деяких властивостей потрібно багато ресурсів.

Введення в CSS-анімацію

Підтримка браузерами

IE: 10.0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: —
Android Browser: 44, 4.1 -webkit-
Chrome для Android: 44

1. Ключові кадри

Ключові кадри використовуються для визначення значень властивостей анімації в різних точках анімації. Ключові кадри визначають поведінку одного циклу анімації; анімація може повторюватися нуль або більше разів.

Ключові кадри вказуються за допомогою правила @keyframes , яке визначається таким чином:

@keyframes ім'я анімації ( список правил )

Створення анімації починається з встановлення ключових кадрівправила @keyframes. Кадри визначають, які характеристики на якому етапі будуть анімовані. Кожен кадр може включати один або більше блоків об'яв з однієї або більше пар властивостей і значень. Правило @keyframes містить ім'я анімації елемента, яке пов'язує правило та блок оголошення елемента.

@keyframes shadow ( from (text-shadow: 0 0 3px black;) 50% (text-shadow: 0 0 30px black;) to (text-shadow: 0 0 3px black;) )

Ключові кадри створюються за допомогою ключових слів from і to (еквівалентні значенням 0% і 100%) або за допомогою процентних пунктів, які можна задавати скільки завгодно. Також можна комбінувати ключові слова та процентні пункти. Якщо кадри мають однакові властивості та значення, їх можна поєднати в одне оголошення:

@keyframes move ( from, to ( top: 0; left: 0; ) 25%, 75% (top: 100%;) 50% (top: 50%;) )

Якщо 0% або 100% кадри не вказані, то браузер користувача створює їх, використовуючи значення, що обчислюються (спочатку задані) анімованої властивості.

Якщо декілька правил @keyframes визначено з тим самим ім'ям, спрацює останнє в порядку документа, а всі попередні проігноруються.

Після оголошення правила @keyframes , ми можемо посилатися на нього як animation:

H1 ( font-size: 3.5em; color: darkmagenta; animation: shadow 2s infinite ease-in-out; )

Не рекомендується анімувати нечислові значення (за рідкісним винятком), оскільки результат у браузері може бути непередбачуваним. Також не слід створювати ключові кадри для значень властивостей, що не мають середньої точки, наприклад, для значень властивості color: pink та color: #ffffff , width: auto та width: 100px або border-radius: 0 та border-radius: 50% ( у цьому випадку правильно буде вказати border-radius: 0%).

1.1. Тимчасова функція для ключових кадрів

Правило стилю ключового кадру також може оголошувати тимчасову функцію, яка повинна використовуватися для переміщення анімації до наступного ключового кадру.

приклад

@keyframes bounce ( from ( top: 100px; animation-timing-function: ease-out; ) 25% ( top: 50px; animation-timing-function: ease-in; ) 50% ( top: 100px; animation-timing- function: ease-out; ) 75% ( top: 75px; animation-timing-function: ease-in; ) to ( top: 100px; ) )

П'ять ключових кадрів вказано для анімації з ім'ям bounce. Між першим та другим ключовим кадром (тобто між 0% та 25%) використовується функція уповільнення. Між другим та третім ключовим кадром (тобто між 25% та 50%) використовується функція плавного прискорення. І так далі. Елемент буде переміщатися вгору по сторінку на 50px, сповільнюючись у міру того, як він досягає своєї найвищої точки, а потім прискорюючись, коли він падає до 100px. Друга половина анімації поводиться аналогічно, але тільки переміщає елемент на 25px вгору по сторінці.

Тимчасова функція, вказана у ключовому кадрі to або 100%, ігнорується.

2. Назва анімації: властивість animation-name

Властивість animation-name визначає список анімацій, що застосовуються до елемента. Кожне ім'я використовується для вибору ключового кадру у правилі, яке надає значення властивостей анімації. Якщо ім'я не відповідає жодному ключовому кадру у правилі, немає властивостей для анімації, відсутнє ім'я анімації, анімація не виконуватиметься.

Якщо кілька анімацій намагаються змінити ту саму властивість, то виконається анімація, найближча до кінця списку імен.

Ім'я анімації є чутливим до регістру, не допускається використання ключового слова none . Рекомендується використовувати назву, що відображає суть анімації, при цьому можна використовувати одне або кілька слів, перерахованих через дефіс або символ нижнього підкреслення _ .

Властивість не успадковується.

Синтаксис

Animation-name: none; animation-name: test-01; animation-name: -sliding; animation-name: moving-vertically; animation-name: test2; animation-name: test3, move4; animation-name: initial; animation-name: inherit;

3. Тривалість анімації: властивість animation-duration

Властивість animation-duration визначає тривалість одного циклу анімації. Задається в секундах s або мілісекундах ms. Якщо елемент задано більше однієї анімації, можна встановити різний час кожної, перерахувавши значення через кому.

Властивість не успадковується.

Синтаксис

Animation-duration: .5s; animation-duration: 200ms; animation-duration: 2s, 10s; animation-duration: 15s, 30s, 200ms;

4. Тимчасова функція: властивість animation-timing-function

Властивість animation-timing-function описує, як розвиватиметься анімація між кожною парою ключових кадрів. Під час затримки анімації тимчасові функції не використовуються.

Властивість не успадковується.

Синтаксис

Animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: step-start; animation-timing-function: step-end; animation-timing-function: cubic-bezier (0.1, 0.7, 1.0, 0.1); animation-timing-function: steps(4, end); animation-timing-function: ease, step-start, cubic-bezier (0.1, 0.7, 1.0, 0.1); animation-timing-function: initial; animation-timing-function: inherit;

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

5. Повторення анімації: властивість animation-iteration-count

Властивість animation-iteration-count показує, скільки разів програється цикл анімації. Початкове значення 1 означає, що анімація відтворюватиметься від початку до кінця один раз. Ця властивість часто використовується у поєднанні зі значенням alternate властивості animation-direction, яке змушує анімацію відтворюватися у зворотному порядку в альтернативних циклах.

Властивість не успадковується.

Синтаксис

Animation-iteration-count: infinite; animation-iteration-count: 3; animation-iteration-count: 2.5; animation-iteration-count: 2, 0, infinite;

6. Напрямок анімації: властивість animation-direction

Властивість animation-direction визначає, чи має анімація відтворюватися у порядку чи у всіх циклах. Коли анімація відтворюється у зворотному порядку, тимчасові функції також змінюються місцями. Наприклад, при відтворенні у зворотному порядку функція ease-in поводитиметься як ease-out .

Властивість не успадковується.

Щоб визначити, чи є повтор циклу анімації парною чи непарною – кількість повторів починається з 1 .

Синтаксис

Animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse; animation-direction: normal, reverse; animation-direction: alternate, reverse, normal; animation-direction: initial; animation-direction: inherit;

7. Відтворення анімації: властивість animation-play-state

Властивість animation-play-state визначає, чи буде анімацію запущено або призупинено. Зупинка анімації всередині циклу можлива через використання цієї властивості скрипт JavaScript. Також можна зупиняти анімацію при наведенні курсору миші на об'єкт - стан: hover.

Властивість не успадковується.

Синтаксис

Animation-play-state: running; animation-play-state: paused; animation-play-state: paused, running, running; animation-play-state: initial; animation-play-state: inherit;

8. Затримка анімації: властивість animation-delay

Властивість animation-delay визначає коли анімація почнеться. Задається в секундах s або мілісекундах ms.

Властивість не успадковується.

Синтаксис

Animation-delay: 5s; animation-delay: 3s, 10ms;

9. Стан елемента до та після відтворення анімації: властивість animation-fill-mode

Властивість animation-fill-mode визначає, які значення застосовують анімацію поза часом її виконання. Коли анімація завершується, елемент повертається до своїх вихідних стилів. За замовчуванням анімація не впливає на значення властивостей, коли анімація застосовується до елемента animation-name і animation-delay . Крім того, за умовчанням анімація не впливає на значення властивостей після її завершення - animation-duration та animation-iteration-count. Властивість animation-fill-mode може перевизначити цю поведінку.

Властивість не успадковується.

Синтаксис

Animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-fill-mode: both; animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none;

10. Короткий запис анімації: властивість animation

Усі параметри відтворення анімації можна поєднати в одній властивості - animation , перерахувавши їх через пробіл:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

Для відтворення анімації достатньо вказати лише дві властивості - animation-name і animation-duration , решта властивостей прийме значення за замовчуванням. Порядок перерахування властивостей не має значення, єдиний час виконання анімації animation-duration обов'язково повинен стояти перед затримкою animation-delay .

11. Множинні анімації

Для одного елемента можна задавати кілька анімацій, перерахувавши їх назви через кому:

Div (animation: shadow 1s ease-in-out 0.5s alternate, move 5s linear 2s;)

Для створення анімації застосовуються властивості CSS transition та animation Розглянемо їх докладно з прикладами.

Елементи анімації не тільки роблять дизайн зручнішим та елегантнішим, але й викликають у користувачів позитивні емоції, які буквально притягують до сайту.

Це що стосується показників користувача.

Що ж до веб-розробки — анімація пожвавлює елементи контенту засобами CSS, без залучення JavaScript, що добре для мобільних пристроїв.

Повинен попередити — перш ніж починати анімацію елементів, потрібно познайомитися з основами HTML і CSS

Основні компоненти CSS анімації - властивості transition та animation, і правило @keyframes.

Розглянемо їх у порядку.

transition

Властивість transition застосовується до створення простих анімацій, тобто воно створює ефект переходу між двома станами елемента.

transition можна розділити на 4 складові, кожна з яких впливає на певний аспект ефекту переходу.

1. transition-property - визначає властивість, яка анімуватиметься. Наприклад, якщо елемент буде зрушуватися, то це будуть властивості top, left, margin і т. п., змінювати розмір, то width або height, змінювати колір - color або background.

Записується так:

transition-property: left;

2. transition-duration – тривалість ефекту переходу. Задається за секунди.

transition-duration: 3s;

3. transition-timing-function – швидкість ефекту переходу. Приймає такі значення:

ease - анімація повільно починається, потім прискорюється і до кінця знову сповільнюється;

ease-in - Повільно починається, а до кінця прискорюється;

ease-out - швидко починається, а до кінця сповільнюється;

ease-in-out - уповільнення на початку та в кінці;

linear - постійна швидкість;

cubic-bezier - задає всі значення у числовому виразі. Наприклад, значення ease записується так: cubic-bezier(0.25,0.1,0.25,1).

4. transition-delay - затримка початку анімації. Визначається в секундах. Наприклад, анімація може початися через певний часпісля завантаження сторінки.

У скороченому варіанті запис анімації виглядає наступним чином - у властивості transition задаються всі перераховані вище значення по порядку через пробіл.

transition: left 3s ease(або cubic-bezier(0.25,0.1,0.25,1) 3s;

Приклад, у якому елемент буде переміщатися при наведенні на нього курсора.

Результат:

animation та @keyframes

Властивість animation і правило @keyframes використовуються для створення анімації будь-якої складності.

Властивість animation задає параметри дії для анімації (тривалість анімації, повторення, напрямок, тип руху, кроки), а в блоці @keyframes задається сама анімація по кроках (зміни виду та положення)

Властивість animation включає вісім складових:

1. animation-name – ім'я анімації. задається довільно. Потрібно у тому, щоб визначити анімацію у блоці @keyframes , оскільки одного елемента то, можливо задано кілька анімацій.

2. animation-duration - тривалість анімації, задається в секундах (s) або мілісекунд (ms).

3. animation-timing-function - визначає тип анімації та приймає наступні значення:

ease - ковзання;

linear - рівний рух;

ease-out - прискорення на початку;

ease-in - прискорення в кінці;

ease-in-out - більш плавне ковзання, ніж ease

cubic-bezier - задає числові параметри що дозволяють реалізувати складніші типи анімації. Інструмент для вибору числових параметрів — cubic-bezier.com

step-start і step-end - задає покрокову анімацію (лічильник)

steps — задає кількість кроків, за які буде виконана анімація (секундомір — steps(60) animation-duration -60s)

4. animation-iteration-count - задає кількість повторень анімації. Приймає значення:

будь-яке число - скільки разів повторюється анімація;

infinite - нескінченне повторення;

5. Animation-direction - задає напрямок руху. Приймає значення:

normal - рух зліва направо;

reverse - рух справа наліво;

alternate - повний цикл туди і назад;

alternate-reverse - повний цикл, але починається і закінчується з кінця;

6. animation-play-state - задає зупинку анімації. Приймає значення:

running - анімація проходить нормально (за умовчанням);

paused - анімація завмирає першому кроці;

7. animation-delay - задає затримку анімації перед початком відтворення. Визначається в секундах (s) та мілісекундах (ms)

8. animation-fill-mode - дозволяє програвати анімацію поза вказаним часом відтворення. Приймає значення:

none — анімація працює тільки в заданому часі відтворення, потім повертається на місце.

forwards - анімація продовжується після закінчення часу відтворення;

backwards - анімація починається до початку відтворення;

both - анімація працює і до початку та після закінчення часу відтворення;

Деякі з цих властивостей спочатку можуть бути абсурдними, але при створенні складних анімацій вони дозволяють реалізувати сміливі творчі рішення.

Всі властивості можна записати в скороченому вигляді, вказавши у властивості animation лише їх значення. Наприклад:

Правило @keyframes – другий крок у створенні складної анімації.

Усередині цього правила створюється поетапне відтворення перетворень, що відбуваються з елементом.

Насправді це виглядає так: у таблиці стилів створюється селектор @keyframes всередину якого поміщаються селектори послідовно визначають стан елемента.

Наприклад, візьмемо елемент

div (
width: 200px;
height: 200px;
background-color: #FF3D00;
animation: nev 5s infinite alternate;

@keyframes nev (
from ( /* Від */
opacity: 0; /* повна прозорість */
}
to ( /* До */
opacity: 1; /* повна непрозорість */
}
}

Селекторами from та to задається перетворення від одного стану елемента до іншого.

Але набагато зручніше ставити зміну стану у відсотках. Тоді число селекторів можна збільшити, і тим самим розбити процес на більшу кількість етапів.

Кожному етапі при цьому можна поставити щось своє. Наприклад тривалість, кордон, розмір тощо.

@keyframes nev (
0% {
opacity: 0;
border-radius: 50%;
}

50% {
opacity: 0.5;
border-radius: 30%;
}

100% {
opacity: 1;
border-radius : 0;
}
}

Приклад появи та зникнення квадрата:

Результат:

Сподіваюся, основи створення анімації зрозумілі. Тепер, коли Вам відомі властивості, значення та інструменти, відкривайте Notepad++ і робіть від простого до складного.

У наступній статті "CSS переміщення, обертання, 3D" детально розберемо властивість transform, що дуже часто застосовується в анімаціях.

CSS3 анімація досить широко використовується. Настав час розібратися навіть початківцям сайтобудівникам що ж таке CSS анімація і як її створити. Можливо Ви думаєте, що CSS3 анімація полягає в тому, щоб змусити рухатися блоки і це схоже на мультфільм. Але CSS анімація - це не тільки переміщення елемента з однієї точки в іншу, а це ще спотворення та інші трансформації. Щоб це було зрозуміло навіть для початківців, я розписав усе по кроках.

1. Основні властивості CSS3 анімації

Невеликий теоретичний блок, з якого Ви зрозумієте, які властивості CSS3 відповідають за анімацію, а також які значення вони можуть набувати.

• animation-name- Унікальне ім'я анімації (ключових кадрів, про них поговоримо трохи нижче).
• animation-duration- Тривалість анімації в секундах.
• animation-timing-function- крива зміни швидкості анімації. На перший погляд, дуже незрозуміло. Завжди легше показати на прикладі, а їх Ви побачите нижче. Може набувати таких значень: linear | ease | ease-in | ease-out | cubic-bezier(n, n, n, n) .
• animation-delay- Затримка в секундах перед початком анімації.
• animation-iteration-count- Кількість повторів анімації. Задається або просто числом, або можна вказати infinite і анімація виконуватиметься нескінченно.

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

Останнє, що нам потрібно знати та розуміти з теорії, — це те, як створювати ключові кадри. Це робити легко і робиться це за допомогою правила @keyframes , всередині якого вказуються ключові кадри. Синтаксис цього правила наступний:

Вище ми поставили перший та останній кадр. Усі проміжні стани розрахуються АВТОМАТИЧНО!

2. Реальний приклад анімації CSS3

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

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

Ось що ми зробимо для прикладу:нехай у нас якийсь блок