Safari CSS Анімація, Apple, Xcode developer

CSS Анімація

Встановлення властивостей переходу

Для створення анімованого переходу спочатку вказують, які властивості CSS повинні бути анімовані, використовуючи властивість -webkit-transition-property , це властивість CSS, яка приймає інші властивості CSS як аргументи. Далі встановлюють тривалість анімації з використанням властивості -webkit-transition-duration.

Наступний приклад створює елемент div, який поступово зникає протягом 2 секунд при натисканні.

Є дві особливі властивості переходу: all і none

-webkit-transition-property: all;
-webkit-transition-property: none;

Встановлення якості переходу на all призводить до анімованого переходу всіх змінених властивостей елемента. Установка в none призводить до скасування анімації властивостей елемента.

Щоб налаштувати анімацію для декількох властивостей, передайте кілька розділених комами параметрів -webkit-transition-property та -webkit-transition-duration . Порядок параметрів визначає, як параметри переходу використовуються. Наприклад, листинг нижче визначає двосекундний -background-color перехід та чотири секундний перехід opacity.

Використання функцій таймінгу

Функції таймінгу дозволяють переходу змінювати швидкість його дії. Встановити функцію таймінгу можна за допомогою властивості -webkit-transition-timing-function. Виберіть із вбудованих функцій синхронізації: ease , ease-in , ease-out або ease-in-out або вкажіть cubic-bezier і передайте параметри керування для створення власних функцій синхронізації. Наприклад, наступний фрагмент визначає 1 другий перехід, зміни непрозорості, використовуючи ease-in функцію, яка починається повільно, а потім прискорюється:

Використовуючи таймінг функцію cubic-bezier , можна, наприклад, визначити функцію, яка починається повільно, прискорюється, а потім уповільнюється в кінці. Функція таймера задається за допомогою кривої Безьє третього порядку, яка визначається чотирма контрольними точками, як показано нижче. Перша та остання контрольні точки завжди встановлюються в (0,0) та (1,1), так що ви вказуєте дві проміжні контрольні точки. Точки вказуються за допомогою х, у координат, х з вираженою як частина загальної тривалості та у вираженої у вигляді частки від загальної зміни.

Визначення користувальницької таймінг функції

Затримка початку

За умовчанням, перехід анімації починається, як тільки одна із зазначених властивостей CSS змінилася. Щоб вказати затримку переходу з моменту зміни властивості та час початку анімації, використовуйте властивість -webkit-transition-delay . Наприклад, наступний фрагмент визначає анімацію, яка починається через 100 мс після зміни властивості:

Обробка проміжних станів та подій

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

Приклад: Виявлення подій кінця переходу.

Анімація з ключових кадрів

Анімація з ключових кадрів включає такі можливості:

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

Створення анімації за ключовими кадрами

Анімація за ключовими кадрами має мінімум - назву, тривалість, і один або більше ключових кадрів. Ключовий кадр правило CSS, що складається з набору властивостей та значень, пов'язаних із точкою у часі.

Щоб створити ключовий кадр анімації, виконайте такі дії:

Створіть іменований набір ключових кадрів, використовуючи CSS правило @-webkit-keyframes . Набір повинен включати щонайменше один ключовий кадр.
Встановіть властивість -webkit-animation-duration на позитивне ненульове значення.
Призначте властивості -webkit-animation-name ім'я ключового набору.

У наступному прикладі визначаються один ключовий кадр у наборі з ім'ям glow. Ключовий кадр визначає синій колір тла. У прикладі визначається псевдоклас div:hover як має анімацію з ім'ям glow та тривалістю анімації 1 с . При наведенні вказівника миші або торканні будь-якого div елемента він стає синім протягом однієї секунди.

Створення ключових кадрів

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

У правилі стилю можна задати будь-яку кількість властивостей CSS.

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

Відносний час задається або як відсоток від тривалості анімації або ключовим словом from або to . Наприклад, 0% вказує початок анімації, 50% півдороги анімації та 100% кінець анімації. Ключове слово from відповідає 0%, а ключове слово to відповідає 100%. Коли анімація виконується, вона плавно переходить від одного стану до іншого в порядку зростання, від 0 до 100%.

Однією з властивостей CSS, які можна вказати у ключовому кадрі -webkit-animation-timing-function. Ця властивість визначає швидкість зміни для анімації від поточного до наступного ключового кадру. "Використання функцій таймінгу".

Встановлення властивостей анімації

-webkit-animation-iteration-count - встановлення кількості повторів анімації. Значення за промовчанням 1 . Може бути встановлене в ціле число або в infinite (нескінченність).
-webkit-animation-direction - Вказує повторювану анімацію або діяти в тому ж напрямку, щоразу, або в альтернативних напрямках. Може бути встановлена в normal (за замовчуванням) або alternate . Якщо встановлено alternate, анімація йде вперед і назад-від 0% до 100% і від 100% до 0% на альтернативних ітераціях. Значення лічильника webkit-animation-iteration-count має бути більше 1, або ця властивість не матимеефект.
-webkit-animation-play-state - Зупинити або відновити анімацію. Встановіть у цій властивості paused , щоб зупинитися і або running (за замовчуванням) для продовження анімації.
-webkit-animation-delay - Час очікування між запуском анімації та початком анімації (за замовчуванням 0с).
-webkit-animation-timing-function - Функція таймінгу за промовчанням використовується між ключовими кадрами. Ви можете перевизначити цю властивість кожного ключового кадру, вказавши додаткові функції таймінгу в рамках ключових кадрів.
-webkit-animation-fill-mode=Вказує анімацію змінити стиль елемента до або після анімації.

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

Якщо встановлено forwards, стан на кінець анімації є постійним.

Якщо встановлено backwards , початковий стан анімації застосовується під час затримки перед початком анімації.

При установці both , застосовуються обидва forwards і backwards .