Переходи і анімація, webreference
За допомогою переходів CSS3 у вас є потенціал змінювати зовнішній вигляд і поведінку елемента щоразу, коли відбувається зміна його стану, наприклад, коли на елемент наводиться курсор, він отримує фокус, стає активним або до елементу відбувається перехід по посиланню.
Анімація в CSS3 дозволяє змінювати зовнішній вигляд і поведінку елемента за допомогою декількох ключових кадрів. Переходи забезпечують зміну від одного стану до іншого, в той час як анімація може бути встановлено кілька точок переходу через різні ключові кадри.
Як уже згадувалося, щоб перехід мав місце, елемент повинен отримати зміна стану і для кожного стану повинні бути визначені різні стилі. Найпростіший спосіб задати стилі для різних станів - це скористатися псевдоклас: hover. focus. active і: target.
Є чотири властивості, пов'язаних з переходами в цілому, це transition-property. transition-duration. transition-timing-function і transition-delay. Не всі вони є обов'язковими для створення переходу, найбільш популярні перші три.
У наведеному нижче прикладі блок змінить колір фону протягом однієї секунди в лінійному вигляді.
демонстрація transition
Вендорний префікси
Наведений вище код, як і інші зразки коду в цьому уроці, не використовують Вендорний префікси. Це зроблено навмисно в інтересах збереження фрагмента коду маленьким і зрозумілим. Щоб отримати найкращу функціональність у всіх браузерах використовуйте префікси. Для довідки, версія з префіксами для коду вище буде виглядати наступним чином.
transition-property
Властивість transition-property визначає, які саме властивості будуть змінюватися в поєднанні з іншими властивостями переходу. За замовчуванням, змінюватися будуть все властивості в різних станах. Проте, тільки властивості задані в значенні transition-property будуть порушені в будь-яких переходах.
У наведеному вище прикладі, властивість background визначено в значенні transition-property. Тут background - єдине властивість, яке буде змінюватися протягом 1 секунди в лінійному вигляді. Будь-які інші властивості, включені коли змінюється стан елемента, але не додані в значення transition-property. не отримають поведінку переходу, як це встановлено у властивостях transition-duration або transition-timing-function.
Якщо потрібно додати кілька властивостей в перехід, вони можуть бути розділені коми всередині значення transition-property. Крім того, може бути використано ключове слово all для переходу всіх властивостей елемента.
Демонстрація transition-property
Властивості в переходах
Важливо відзначити, що не для всіх властивостей може бути виконаний перехід. а тільки для властивостей, які мають помітну точку на півдорозі. Кольори, розміри шрифтів тощо можуть переходити від одного значення до іншого, оскільки у них є розпізнаються значення в проміжку між собою. У властивості display. наприклад, не може бути переходу, оскільки воно не має ніякої середньої точки. Набір найбільш популярних властивостей, до яких застосовується перехід наступний.
transition-duration
Тривалість переходу задається за допомогою властивості transition-duration. Як значення цієї властивості можна використовувати основні значення часу, в тому числі секунди (s) і мілісекунди (ms). Ці значення часу можна також задавати і дробовими - .2s, наприклад.
При переході декількох властивостей можна задати кілька тривалість, по одному на кожне властивість. Як і в випадку значення властивості transition-property. кілька тривалостей можуть бути оголошені за допомогою значень, розділених комами. Важливий порядок цих значень при визначенні окремих властивостей і тривалості. Наприклад, перша властивість, заданий в transition-property. збігатиметься з першим значенням у властивості transition-duration і так далі.
Якщо на кілька властивостей в переході доводиться тільки одне значення тривалості, то воно буде задавати тривалість для всіх властивостей переходу.
Демонстрація transition-duration
функція переходу
Властивість transition-timing-function використовується для завдання швидкості, з якою буде рухатися перехід. Знаючи тривалість з властивості transition-duration у переходу може бути кілька швидкостей в межах однієї тривалості. Деякі найбільш популярні значення ключових слів для характеристики transition-timing-function включають linear. ease-in. ease-out і ease-in-out.
Значення linear визначає перехід, що рухається в постійною швидкістю з одного стану до іншого. Значення ease-in визначає перехід, який починається повільно і прискорюється протягом переходу, в той час як значення ease-out визначає перехід, який починає швидко і сповільнюється протягом всього переходу. Значення ease-in-out визначає перехід, який починається повільно, прискорюється в середині, а потім знову сповільнюється перед закінченням.
За кожною функцією часу варто кубічна крива Безьє, яку можна вказати конкретно за допомогою значення cubic-bezier (x1, y1, x2, y2). Додаткові значення включають step-start. step-stop і значення steps (<число шагов>, <направление>).
При переході декількох властивостей, ви можете визначити і кілька функцій часу. Ці значення, подібно до інших значень властивостей переходу, можуть бути оголошені через кому.
Демонстрація функції переходу
transition-delay
Демонстрація transition-delay
Скорочена властивість transition
Написання кожного властивості переходу окремо може напружувати, особливо з префіксами. На щастя, є скорочене властивість transition. здатне підтримувати всі ці різні властивості і значення. Використовуючи одиночне значення transition. ви можете встановити кожне значення переходу в наступному порядку: transition-property. transition-duration. transition-timing-function і, нарешті, transition-delay. Не використовуйте коми з цими значеннями, якщо не бажаєте визначити кілька переходів.
Щоб задати кілька переходів відразу, встановіть кожну окрему групу значень переходу, а потім використовуйте кому, щоб відокремити кожну додаткову групу значень.
Демонстрація властивості transition
приголомшлива кнопка
Переходи виконують велику роботу зі створення візуальних взаємодій з одного стану в інший і ідеально підходять для цих видів одиночних змін стану. Проте, коли потрібен більший контроль, для переходів необхідно кілька станів. З цього моменту переходи йдуть, а в справу вступає анімація.
Ключові кадри анімації
Щоб встановити кілька точок, в яких елемент повинен здійснювати перехід, використовується правило @keyframes. Це правило включає ім'я анімації, будь-яке число контрольних точок, а також властивості, призначені для анімації.
Вендорний префікси в правилі @keyframes
Правило @keyframes має бути з Вендорний префіксами, так само, як і всі інші властивості transition і animation. Префікси для @keyframes виглядають наступним чином:
Анімація вище називається slide. стану починаються відразу ж після відкриття правила @keyframes. Різні контрольні точки ключових кадрів задаються допомогою відсотків, починаючи з 0% і працюючи до 100%, з проміжною точкою на 50%. При бажанні замість 0% і 100% можуть бути використані ключові слова from і to. Крім 50% також можуть бути вказані додаткові контрольні точки. Властивості елементів для анімації перераховані всередині кожної контрольної точки, left і top в наведеному вище прикладі.
Демонстрація ключових кадрів анімації
Наведіть курсор на кульку внизу, щоб побачити анімацію в дії.
animation-name
Після того, як оголошені ключові кадри для анімації, вони повинні бути призначені для елемента. Для цього використовується властивість animation-name з ім'ям анімації з правила @keyframes. як значення властивості. Декларація animation-name застосовується до елементу, для якого має бути задана анімація.
Використання одного властивості animation-name при цьому недостатньо. Крім того, необхідно оголосити властивість animation-duration і значення, щоб браузер знав, як довго має тривати анімація до завершення.
animation-duration, функція часу і animation-delay
Після того, як ви оголосили властивість animation-name для елемента, анімація поводиться подібно переходах. Вона включають в себе тривалість, функцію часу і затримку при бажанні. Спершу анімації потрібно тривалість, оголошена за допомогою властивості animation-duration. Як і у випадку з переходами, тривалість може бути задана в секундах або мілісекундах.
Функція часу і затримка можуть бути оголошені за допомогою властивостей animation-timing-function і animation-delay. відповідно. Значення цих властивостей наслідують і поводяться так само, як це робиться з переходами.
Анімація нижче повинна викликати відскік ball один раз при переміщенні вправо, але тільки при наведенні курсору на stage.
демонстрація анімації
Наведіть курсор на кульку внизу, щоб побачити анімацію в дії.
Налаштування анімації
Анімація також пропонує можливість подальшої настройки поведінки елемента, в тому числі можна задати, скільки разів анімація виконується, а також напрямок, в якому анімація завершиться.
animation-iteration-count
За замовчуванням, анімація запускає свій цикл один раз від початку до кінця, а потім зупиняється. Щоб анімація повторювалася багато разів може бути використано властивість animation-iteration-count. Значення для нього включають ціле число або ключове слово infinite. За допомогою цілого числа анімація буде повторюватися стільки разів, скільки вказано, в той час як ключове слово infinite буде повторювати анімацію нескінченно і ніколи не зупиниться.
Демонстрація animation-iteration-count
Наведіть курсор на кульку внизу, щоб побачити анімацію в дії.
animation-direction
Крім можливості встановити, скільки разів анімація повторюється, ви можете також оголосити напрямок, в якому анімація завершується, за допомогою властивості animation-direction. Значення цієї властивості включають в себе normal. reverse. alternate і alternate-reverse.
Значення normal відтворює анімацію, як і мало намір, від початку до кінця. Значення reverse відтворює анімацію точно навпаки, ніж це визначено в правилі @keyframes. таким чином, починаючи з 100% і працюючи в зворотному напрямку до 0%.
Значення alternate відтворить анімацію вперед, а потім назад. У ключових кадрах це включає виконання вперед від 0% до 100%, а потім у зворотному напрямку від 100% до 0%. Використовуючи властивість animation-iteration-count можна обмежити кількість разів, коли анімація працює вперед і назад. Рахунок починається з 1, коли анімація проходить вперед від 0% до 100%, а потім додається 1, коли анімація проходить в зворотному порядку від 100% до 0%. Об'єднання в цілому двох ітерацій. Значення alternate також інвертує будь-які функції часу при відтворенні в зворотному напрямку. Якщо анімація використовує значення ease-in йде від 0% до 100%, то потім використовує значення ease-out йде від 100% до 0%.
І, нарешті, значення alternate-reverse поєднує обидва значення alternate і reverse. запускаючи анімацію назад, а потім вперед. Значення alternate-reverse починається зі 100% і виконується до 0%, а потім знову назад до 100%.
Демонстрація animation-direction
Наведіть курсор на кульку внизу, щоб побачити анімацію в дії.
animation-play-state
Властивість animation-play-state дозволяє анімації відтворюватися або зупинитися на паузу, за допомогою ключових слів running і paused. відповідно. Коли анімація знімається з паузи, вона відновлює роботу з поточного стану, а не починається знову з самого початку.
У наведеному нижче прикладі властивість animation-play-state встановлюється на паузу, коли stage активний при натисканні на нього. Зверніть увагу на те, як анімація тимчасово призупиняється, поки ви не відпустите кнопку миші.
Демонстрація animation-play-state
Наведіть курсор на кульку внизу, щоб побачити анімацію в дії. Клацання призупиняє анімацію.
animation-fill-mode
Властивість animation-fill-mode визначає, як елемент повинен бути стилізований - до, після або до і після запуску анімації. Властивість animation-fill-mode приймає чотири значення ключових слів, включаючи none. forwards. backwards і both.
Значення none не застосовуватиме будь-які стилі до елементу до або після того, як анімація запущена.
Значення forwards збереже стилі, оголошені в останньому зазначеному ключовому кадрі. На ці стилі, проте, можуть вплинути значення властивостей animation-direction і animation-iteration-count. змінюючи, де анімація закінчується.
Значення backwards буде застосовувати стилі першого заданого ключового кадру, до того, як анімація буде працювати. Включає застосування цих стилів протягом всього часу, що може бути задано в animation-delay. Значення backwards також може залежати від значення властивості animation-direction.
Нарешті, значення both застосує поведінку відразу від обох значень forwards і backwards.
Демонстрація animation-fill-mode
Наведіть курсор на кульку внизу, щоб побачити анімацію в дії. Клацання призупиняє анімацію.
Скорочена властивість animation
демонстрація animation
Наведіть курсор на кульку внизу, щоб побачити анімацію в дії. Клацання призупиняє анімацію.