CSS-Transitions у Safari, Створення та розробка сайтів - Nikita Spivak

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

Сьогодні, створюючи сайт, його можна прикрасити дуже красивою анімацією елементів, які не тільки радуватимуть око, але й будуть зручними для користувача — жодних різких рухів, появ, зрушень. Працюючи над одним проектом, я помітив одну особливістьв браузері Сафарі: -webkit-transition: all 0.5s ease — не працює !

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

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

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

У пошуках потрібної інформації я перерив достатньо сайтів, перепробував кілька милиць, проте обхитрити браузер Apple мені допомогло лише встановлення параметра -webkit-transition-property, в якому призначив ті параметри стилів, які змінювалися, а саме opacity і margin-top.

Тим не менш, відпрацювання анімації в Safari все одно залишаєбажати кращого: є ривки, дивно працює зникнення елемента (калбек, callback). Можливо ви, шановні передплатники щось ще підкажете, щоб покращити відпрацювання анімації на CSS-transition у Safari?

---