У чому різниця між CSS3 переходів ease-in, ease-outі т.д.?
Відповіді:
Переходи та анімації CSS3 підтримують ослаблення, офіційно назване "функцією синхронізації". Спільними з них ease-in, ease-out, ease-in-out, ease, і linear, або ви можете вказати свій власний , використовуючи cubic-bezier().
ease-in почне анімацію повільно та закінчить на повній швидкості.ease-out почне анімацію на повній швидкості, а потім повільно закінчить.ease-in-out почне повільно, бути найшвидшим в середині анімації, потім закінчити повільно.easeце як ease-in-out, за винятком того, що він починається трохи швидше, ніж закінчується.linear не використовує послаблення.cubic-bezierсинтаксисі, але це, як правило , не потрібно , якщо ви не хочете , щоб деякі дуже точні ефектів.В основному, послаблення - це сповільнюватися до зупинки, послаблення - повільно прискорюватися, а лінійне - не робити жодного. Більш детальні ресурси ви можете знайти в документації timing-functionна MDN .
І якщо ви хочете вищезгаданих точних ефектів, дивовижний Lea Verou's cubic-bezier.com є для вас! Це також корисно для графічного порівняння різних функцій синхронізації.
Інший, функція часу , діє як , але виконує тільки кінцеве число кроків між початком в перехідному і його кінці. мені було найбільш корисно в анімації CSS3, а не в переходах; хороший приклад - завантаження показників крапками. Традиційно для використання ілюзії руху використовується серія статичних зображень (скажімо, вісім крапок, дві зміни кольору кожного кадру). За допомогою анімації та перетворення ви використовуєте рух для створення ілюзії окремих кадрів! Як весело.steps()linearsteps()steps(8)rotate